@if index($partials, form) {
  .field {
    margin-bottom: $space/2;
    .description {
      color: $grey;
      display: block;
      @include font-size($small);
    }
  }

  label,
  .label {
    @include font-size($small);
    display: block;
    font-weight: bold;
  }

  input,
  textarea,
  select {
    box-shadow: $shadow inset;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  input:not([type=submit]),
  textarea,
  .select select {
    background: $background;
    border: 1px solid $line;
    border-radius: $radius;
    box-sizing: border-box;
    display: block;
    padding: $space/6 $space/4;
    transition-property: (background, border);
    transition-duration: ($ease);
    &:hover {
      border-color: shade($line, 20%);
    }
    &:active,
    &:focus {
      background: #FFF;
      border-color: $blue;
      outline: none;
    }
    &[disabled],
    &[disabled=disabled],
    &[disabled=true],
    &[disabled],
    &[readonly=true],
    &[readonly=readonly],
    &[readonly] {
      border-color: $light;
      &:active,
      &:focus,
      &:hover {
        background: $light;
        border-color: $light;
      }
    }
  }

  .select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    & > select {
      appearance: none;
      @include button($light, true);
      box-shadow: $shadow;
      cursor: pointer;
      padding: $space/6 1.5*$space $space/6 $space/2;
    }
    &:after {
      bottom: 0;
      content: '▾';
      cursor: pointer;
      @include font-size($smaller);
      line-height: 120%;
      pointer-events: none;
      position: absolute;
      right: $space/2;
      top: 50%;
      transform: (translateY(-50%));
    }
  }

  .actions {
    border-top: 1px solid $light;
    border-radius: 0 0 $radius $radius;
    margin-top: $space/2;
    padding-top: $space/2;
    text-align: right;
  }
}
