$spacing: 10px;

INPUT[type='text'],
INPUT[type='password'],
INPUT[type='number'],
INPUT[type='date'],
INPUT[type='email'],
INPUT[type='search'],
INPUT[type='tel'],
INPUT[type='url'],
SELECT,
TEXTAREA {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px 8px;

    color: var(--input-text);
    background: var(--input-bg);

    // border-color: var(--input-border);
    border-width: 1.25px;
    border-radius: $border-radius;
    border-style: none;
    font-size: 15px;

    &::placeholder {
      color: var(--input-placeholder);
    }

    &:hover {
      border-color: var(--input-hover-border, var(--input-border));
      background: var(--input-hover-bg, var(--input-bg));
    }

    &.disabled, &[disabled], &[disabled]:hover  {
      color: var(--input-disabled-text);
      background-color: var(--input-disabled-bg, var(--input-bg));
      border-color: var(--input-disabled-border, var(--input-border));
      cursor: not-allowed;
      &::placeholder {
          color: var(--input-disabled-placeholder, var(--input-placeholder));
      }
    }

    &:focus {
      color: var(--input-focus-text, var(--input-text));
      background-color: var(--input-focus-bg);
      border-color: var(--input-focus-border);
    }
}

FORM {
  LABEL {
    color: var(--input-label);
    display: inline-block;
    margin: #{$spacing * 2} 0 $spacing 0;

    &.radio, &.checkbox {
      cursor: pointer;
      margin: 0;

      &.standalone {
        margin: 10px 0;
      }
    }
  }

  .radio-group, .checkbox-group {
    margin: #{$spacing * 2} 0 $spacing 0;
  }

  .actions {
    padding-top: $spacing;
  }

  .detail {
    margin-top: 2px;
    @extend .text-small;
    color: var(--muted);
  }

  .group {
    border: 1px solid var(--input-border);
    padding: 20px;
  }
}

FORM.vertical {
  LABEL {
    margin-top: $spacing;
  }

  & > LABEL:first-child {
    margin-top: 0;
  }

  LABEL, INPUT, SELECT, TEXTAREA {
    display: block;
  }

  LABEL.checkbox, LABEL.radio {
    INPUT {
      display: inline;
    }
  }
}

.field-required {
  color: red;
  font-weight: bold;
}

INPUT.inline-input {
  display: inline-block;
  width: 75px;
  margin: 0 10px;
}

SELECT {
  height: 35px;
}