// Table of Contents
// ==================================================
// Reset
// Inputs
// Selects
// Checkboxes & Radios
// Notes
// Labels
// Addons

// scss-lint:disable ImportantRule
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorDepth

// Reset
// ==================================================
::-webkit-file-upload-button { @include appearance(button); }
::-webkit-input-placeholder {
  color: color(gray);
  font-weight: 300;
}
::-moz-placeholder {
  color: color(gray);
  font-weight: 300;
}
:-ms-input-placeholder {
  color: color(gray);
  font-weight: 300;
}
fieldset,
legend { border: 0; }
legend {
  border-bottom: 1px solid color(dark-haze);
  box-sizing: border-box;
  display: table;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 0 0 10px;
  white-space: normal;
}
button,
input { overflow: visible; }
optgroup { font-weight: text-weight(semibold); }
input,
select,
textarea {
  @include appearance(none);
  @include transition(all 0.3s ease-in-out);
  background: color(white);
  border: 1px solid color(dark-haze);
  border-radius: border-radius(b);
  box-sizing: border-box;
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  padding: 9px 15px;
  width: 100%;
  vertical-align: middle;
}
input:not([type='submit']),
select,
textarea {
  box-shadow: inset 0 2px 0 0 darkish-color(light-haze);

  &.dark {
    background: color(light-black);
    box-shadow: inset 0 2px 0 0 dark-color(light-black);

    &[disabled] { background: color(black); }
  }
  &.light {
    box-shadow: inset 0 2px 0 0 darker-color(light-haze);

    &[disabled] { background: color(light-haze); }
  }

  &[disabled] {
    @include text-fill-color(color(gray));
    background: color(light-haze);
    color: color(gray);
    font-weight: text-weight(normal) !important;
  }
  &:focus {
    box-shadow: inset 0 2px 0 0 transparentize(color(blue), 0.5);
    border-color: color(blue);
  }
  &:focus:invalid {
    box-shadow: inset 0 2px 0 0 transparentize(color(red), 0.5);
    border-color: color(red);
  }
}
input {
  &::-webkit-input-placeholder { line-height: 24px; }
  &::-moz-placeholder { line-height: 24px; }
  &:-ms-input-placeholder { line-height: 24px; }
}
input,
textarea {
  &::-webkit-input-placeholder { font-weight: text-weight(normal); }
  &::-moz-placeholder { line-height: text-weight(normal); }
  &:-ms-input-placeholder { line-height: text-weight(normal); }
}
input[type='submit'] {
  margin: 0;
  width: initial;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { height: auto; }
input[type='search'] {
  @include appearance(textfield);
  outline-offset: -2px;
}
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration { @include appearance(none); }
label {
  display: inline-block;
  font-weight: text-weight(semibold);
  line-height: 1;
  margin-bottom: 5px;
}
select {
  padding: 13px 15px;

  [multiple],
  [size] { height: auto; }

  &[disabled] { font-weight: text-weight(semilight); }
}
textarea {
  height: 152px;
  overflow: auto;

  &::-webkit-input-placeholder { line-height: 1; }
  &::-moz-placeholder { line-height: 1; }
  &:-ms-input-placeholder { line-height: 1; }
}

// Inputs
// ==================================================
.form-input {
  border-color: color(dark-haze);
  vertical-align: middle;

  &.form-size-l {
    input,
    textarea {
      font-size: text-size(l);
      padding: 14px 20px 15px;
    }
    input {
      &::-webkit-input-placeholder { line-height: 30px; }
      &::-moz-placeholder { line-height: 30px; }
      &:-ms-input-placeholder { line-height: 30px; }
    }
    textarea { height: 197px; }

    &.form-height-m {
      textarea { height: 266px; }
    }
    &.form-height-s {
      textarea { height: 128px; }
    }
  }
  &.form-size-m {
    input,
    textarea {
      font-size: text-size(m);
      padding: 11px 20px 12px;
    }
    input {
      &::-webkit-input-placeholder { line-height: 28px; }
      &::-moz-placeholder { line-height: 28px; }
      &:-ms-input-placeholder { line-height: 28px; }
    }
    textarea { height: 173px; }

    &.form-height-m {
      textarea { height: 234px; }
    }
    &.form-height-s {
      textarea { height: 112px; }
    }
  }
  &.form-size-s {
    input,
    textarea {
      font-size: text-size(s);
      margin-bottom: 5px;
      padding: 5px 10px;
    }
    input {
      &::-webkit-input-placeholder { line-height: 20px; }
      &::-moz-placeholder { line-height: 20px; }
      &:-ms-input-placeholder { line-height: 20px; }
    }
    textarea { height: 109px; }

    &.form-height-m {
      textarea { height: 145px; }
    }
    &.form-height-s {
      textarea { height: 73px; }
    }
  }
  &.form-height-m {
    textarea { height: 202px; }
  }
  &.form-height-s {
    textarea { height: 102px; }
  }
  &.form-width-l {
    input,
    textarea { width: 175px; }
  }
  &.form-width-m {
    input,
    textarea { width: 125px; }
  }
  &.form-width-b {
    input,
    textarea { width: 100px; }
  }
  &.form-width-s {
    input,
    textarea { width: 75px; }
  }
  &.form-style-inline {
    display: inline-block;
    width: auto;

    input,
    textarea {
      display: inherit;
      width: inherit;
    }
  }
}

// Selects
// ==================================================
.form-select {
  display: block;
  position: relative;
  vertical-align: middle;
  width: 100%;

  &::after {
    content: '\54';
    font-family: 'dripicons';
    font-size: text-size(m);
    line-height: 1;
    margin-top: -8px;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 50%;
  }
  &.form-size-l {
    select {
      font-size: text-size(l);
      padding: 19px 20px 20px;
    }

    &::after {
      font-size: text-size(l);
      margin-top: -9px;
      right: 20px;
    }
  }
  &.form-size-m {
    select {
      font-size: text-size(m);
      padding: 16px 20px 17px;
    }

    &::after {
      font-size: text-size(m);
      margin-top: -9px;
      right: 20px;
    }
  }
  &.form-size-s {
    select {
      font-size: text-size(s);
      margin-bottom: 5px;
      padding: 8px 10px 9px;
    }

    &::after {
      font-size: text-size(s);
      margin-top: -7px;
      right: 10px;
    }
  }
  &.form-width-l {
    select { width: 175px; }
  }
  &.form-width-m {
    select { width: 125px; }
  }
  &.form-width-b {
    select { width: 100px; }
  }
  &.form-width-s {
    select { width: 75px; }
  }
  &.form-style-inline {
    display: inline-block;
    width: auto;

    select {
      display: inherit;
      width: inherit;
    }

    &::after { display: none; }
  }
}

// Checkboxes & Radios
// ==================================================
.form-checkbox,
.form-radio {
  background: color(white);
  border: 1px solid;
  border-color: color(dark-haze);
  border-radius: border-radius(b);
  box-shadow: inset 0 2px 0 0 darkish-color(light-haze);
  display: inline-block;
  height: 18px;
  line-height: 18px;
  position: relative;
  width: 18px;

  label {
    @include transition(all 0.3s ease-in-out);
    border: 1px solid;
    border-color: inherit;
    border-radius: inherit;
    color: color(transparent);
    cursor: pointer;
    height: 100%;
    line-height: inherit;
    margin: -1px 0 0 -1px;
    position: absolute;
    text-align: center;
    width: 100%;

    &:hover {
      background: color(haze);
      box-shadow: none !important;
    }
  }
  input[type='checkbox'],
  input[type='radio'] {
    left: -9999px;
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    top: -9999px;

    &[disabled] + label {
      background: lightish-color(haze);
      box-shadow: none !important;
      cursor: not-allowed;
    }
    &:checked + label {
      background: color(green);
      border-color: color(green);
      color: color(white);
    }
    &[disabled]:checked + label {
      background: lightish-color(green) !important;
      color: transparentize(color(white), 0.35);
    }

    + label { vertical-align: baseline; }
  }

  &.form-size-l {
    height: 26px;
    line-height: 26px;
    width: 26px;
  }
  &.form-size-m {
    height: 22px;
    line-height: 22px;
    width: 22px;
  }
  &.form-size-s {
    height: 14px;
    line-height: 14px;
    width: 14px;
  }
  &.form-align-vertical { vertical-align: middle; }
  &.dark {
    label {
      background: color(light-black);
      box-shadow: inset 0 2px 0 0 dark-color(light-black);

      &:hover { background: color(dark-black); }
    }

    input[type='checkbox'],
    input[type='radio'] {
      &[disabled] + label { background: lightish-color(dark-black); }
    }
  }
  &.light {
    label {
      background: color(light-haze);
      box-shadow: inset 0 2px 0 0 darker-color(light-haze);

      &:hover { background: color(dark-haze); }
    }

    input[type='checkbox'],
    input[type='radio'] {
      &[disabled] + label { background: lightish-color(dark-haze); }
    }
  }
}
.form-radio { border-radius: border-radius(xl); }

// Notes
// ==================================================
.form-note {
  color: color(gray);
  display: block;
  font-size: text-size(xs);
  margin: -10px 0 10px;
}

// Labels
// ==================================================
.form-input,
.form-select,
.form-checkbox,
.form-radio {
  &.form-size-l,
  &.form-size-m {
    label { font-size: text-size(m); }
  }
  &.form-size-s {
    label { font-size: text-size(s); }
  }
}
.with-floating-label {
  position: relative;
  vertical-align: top;

  label {
    @include transition(all 0.3s ease-in-out);
    background: color(haze);
    border-radius: border-radius(s);
    font-size: text-size(xxs);
    font-weight: text-weight(semibold);
    left: 16px;
    line-height: 1;
    margin: -7px 0 0;
    opacity: 0;
    padding: 3px 6px;
    position: absolute;
    top: 20px;
  }

  &.form-size-l,
  &.form-size-m {
    label {
      font-size: text-size(xs);
      left: 21px;
      margin-top: -9px;
      padding: 4px 8px;
    }
  }
  &.form-size-s {
    label {
      font-size: text-size(xxs);
      left: 12px;
      margin-top: -6px;
      padding: 2px 3px 1px;
    }
  }
  &.dark {
    label { background: color(light-black); }
  }
  &.light {
    label { background: color(dark-haze); }
  }

  input,
  textarea,
  select {
    &:focus + label {
      opacity: 1;
      top: 0;
    }
  }
}

// Addons
// ==================================================
.with-form-addons {
  border-collapse: separate;
  border-spacing: 0;
  display: table;
  position: relative;
  width: 100%;

  button,
  input,
  select,
  .btn,
  .form-addon {
    border-radius: 0;
    box-sizing: border-box;
    display: table-cell;
    margin: 0;
    vertical-align: middle;
  }

  .btn {
    padding-left: 10px;
    padding-right: 10px;
  }
  .form-addon {
    border-style: solid;
    border-width: 1px;
    line-height: 1;
    min-width: 44px;
    padding: 0 10px;
    text-align: center;
    white-space: nowrap;
    width: 1%;

    i {
      display: inline-block;
      margin-top: -2px;
    }

    &.dark { border-color: color(dark-black); }
    &.with-addon-btn {
      border: 0;
      min-width: auto;
      padding: 0;

      .btn {
        border-left-width: inherit;
        border-radius: 0;
      }
    }

    .form-checkbox,
    .form-radio { border: 0; }
    .form-checkbox {
      border-radius: border-radius(b);

      label,
      label::after { border-radius: border-radius(s); }
    }
    .form-radio {
      border-radius: border-radius(xl);

      label,
      label::after { border-radius: border-radius(xl); }
    }
  }

  *:not(:first-child) { border-left: 0; }
  *:first-child {
    border-bottom-left-radius: border-radius(b);
    border-top-left-radius: border-radius(b);

    .btn {
      border-bottom-left-radius: border-radius(b) !important;
      border-top-left-radius: border-radius(b) !important;
    }
  }
  *:last-child {
    border-bottom-right-radius: border-radius(b);
    border-top-right-radius: border-radius(b);

    .btn {
      border-bottom-right-radius: border-radius(b) !important;
      border-top-right-radius: border-radius(b) !important;
    }
  }

  &.form-size-l {
    .form-addon {
      font-size: text-size(l);
      min-width: 60px;
    }
  }
  &.form-size-m {
    .form-addon {
      font-size: text-size(m);
      min-width: 52px;
    }
  }
  &.form-size-s {
    .form-addon {
      font-size: text-size(s);
      min-width: 30px;
      padding: 0 9px;

      .color-picker {
        .dropmenu { margin-left: -7px; }
        .swatch.active {
          height: 19px;
          width: 19px;
        }
      }
    }

    i { font-size: text-size(s); }
    button,
    input,
    select { margin-bottom: 0; }
  }
}