@import "variables";

.full-width-forms {
  .btn {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .btn,
  a,
  button,
  submit,
  select,
  textarea,
  input {
    &:not([type='checkbox']):not([type='radio']) {
      width: 100%;
    }
  }
}

fieldset {
  border-radius: $radius;
  border: $border-width solid #f5f5f5;
  margin: 1em 0;

  legend {
    font-weight: 400;
    padding: 0 0.25em;
  }
}

input, select, textarea, button, .btn {
  margin-bottom: 1px;
}

input, select, textarea {
  @include appearance(none);

  border-radius: $radius;
  border: 1px solid $gray-lighter;
  background-color: $input-background-color;
  box-shadow: none;
  color: $text;
  display: block;
  font-size: inherit;
  outline: none;
  padding: 0.49em $input-left-right-padding;

  &:hover, &:focus {
    border-color: $gray;
    transition: $all;
    background-color: $input-background-color-hover;
  }

  &:focus {
    border-color: $gray;
  }
}

textarea {
  padding: $input-left-right-padding;
}

select {
  @include svg-background;

  background-image: url($icon-arrow-updown);
  line-height: 1.1;
  padding: 0.78em $input-left-right-padding;
  padding-right: 1.4em;
}

input {
  &:not(.btn):not([type='checkbox']):not([type='radio']) {
    min-height: 2.7em;
  }

  &[type='file'] {
    background-color: $input-background-color;
    width: 100%;
    font-size: 12px;
    padding: 1.02em $input-left-right-padding;
  }

  &[type='range'] {
    padding: 0.87em 0.1em;

    &:focus {
      outline: 0;
    }
  }

  &[type='search'] {
    box-sizing: border-box !important;

    @include appearance(none);
  }

  &[type='checkbox'], &[type='radio'] {
    background-color: $input-background-color;
    border: $border-width solid #888;
    display: inline-block;
    height: 1em;
    margin: 0 0.3em -0.1em 0;
    padding: 0;
    position: relative;
    top: 0;
    width: 1em;
    overflow: hidden;

    &:checked {
      background-color: $input-checkbox-checked;
      border-color: $input-checkbox-checked;
    }

    &:disabled {
      opacity: 0.3;
    }
  }

  &[type='checkbox'] {
    border-radius: $radius;

    &:checked {
      @include svg-background;

      background-image: url($icon-check-inverse);
      border: none;
    }
  }

  &[type='radio'] {
    border-radius: $round;

    &:checked {
      &:before {
        color: white;
        content: " ";
        height: 1em;
        overflow: hidden;
        position: absolute;
        text-align: center;
        top: 0;
        width: 1em;
      }
    }
  }
}

// Adjustments for iOS Safari

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input:not(.btn):not([type='checkbox']):not([type='radio']), select, textarea {
    min-height: $input-height;
  }
}

// Adjustments to Firefox

@-moz-document url-prefix() {
  input {
    &[type='file'] {
      padding: 1em $input-left-right-padding;
    }
  }

  select {
    padding: 0.641em $input-left-right-padding;

    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000;
      transition: none;
    }
  }
}

// Adjustments for internet explorer 10+

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  select {
    padding: 0.65em $input-left-right-padding;
    padding-right: $input-left-right-padding;
  }

  input {
    &[type='file'] {
      &::-ms-value {
        background: $input-background-color;
      }

      &::-ms-value, &::-ms-value {
        box-shadow: none;
        border: 0;
      }
    }

    &[type='range'] {
      border-color: transparent;
    }
  }
}