// 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 $gray-l2;
  border-radius: 2px;
  @include linear-gradient($gray-l5, $white);
  background-color: $gray-l5;
  @include box-shadow(inset 0 1px 2px $shadow-l1);
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: $baseFontColor;
  outline: 0;

  &::-webkit-input-placeholder,
  &:-moz-placeholder,
  &:-ms-input-placeholder {
      color: $gray-l2;
  }

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

// ====================

// forms - fields - not editable
.field.is-not-editable {

  & label.is-focused {
   color: $gray-d2;
  }

  label, input, textarea {
    pointer-events: none;
  }
}

// ====================

// field with error
.field.error {

  input, textarea {
    border-color: $red;
  }
}

// ====================

// forms - additional UI
form {

  .note {
    @include box-sizing(border-box);

    .title {

    }

    .copy {

    }

    // note with actions
    &.has-actions {
      @include clearfix();

      .title {

      }

      .copy {

      }

      .list-actions {

      }
    }
  }

  .note-promotion {

  }
}

// ====================

// forms - grandfathered
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;
}
