// studio - elements - forms
// ====================

// forms - general
input[type="text"],
input[type="email"],
input[type="password"],
textarea.text {
  padding: 6px 8px 8px;
  @include box-sizing(border-box);
  border: 1px solid $mediumGrey;
  border-radius: 2px;
  @include linear-gradient($lightGrey, tint($lightGrey, 90%));
  background-color: $lightGrey;
  @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: $baseFontColor;
  outline: 0;

  &::-webkit-input-placeholder,
  &:-moz-placeholder,
  &:-ms-input-placeholder {
      color: #979faf;
  }

  &:focus {
    @include linear-gradient($paleYellow, tint($paleYellow, 90%));
    outline: 0;
  }
}

// forms - specific
input.search {
  padding: 6px 15px 8px 30px;
  @include box-sizing(border-box);
  border: 1px solid $darkGrey;
  border-radius: 20px;
  background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
  font-family: 'Open Sans', sans-serif;
  color: $baseFontColor;
  outline: 0;

  &::-webkit-input-placeholder {
      color: #979faf;
  }
}

label {
  font-size: 12px;
}

code {
  padding: 0 4px;
  border-radius: 3px;
  background: #eee;
  font-family: Monaco, monospace;
}

.CodeMirror {
  font-size: 13px;
  border: 1px solid $darkGrey;
  background: #fff;
}

.text-editor {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  @include box-sizing(border-box);
  border: 1px solid $mediumGrey;
  @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
  background-color:  #edf1f5;
  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
  font-family: Monaco, monospace;
}