//
//  forms mixins
//

@import './utils';
@import '../components/Icon/config';

@mixin disabled-field {
  color: $form-field-disabled-color;
  border-color: $form-field-disabled-border-color;
  background-color: $form-field-disabled-background-color;
  cursor: $form-field-disabled-cursor;
}

@mixin read-only-field {
  color: $form-field-read-only-color;
  border-color: $form-field-read-only-border-color;
  background-color: $form-field-read-only-background-color;
  cursor: $form-field-read-only-cursor;
}

@mixin form-field-base {
  display: block;
  width: 100%;
  font-family: $form-field-font-family;
  font-size: $form-field-font-size;
  color: $form-field-color;
  background-color: $form-field-background;
  border: $form-field-border-width solid $form-field-border-color;
  border-radius: $form-field-border-radius;
  outline: 0;
  appearance: none;
  transition: 200ms border, background, box-shadow, color ease-in-out;
  will-change: border, background, color;

  &:hover {
    border: $form-field-border-hover;
    box-shadow: $form-field-box-shadow-hover;
  }

  &:focus {
    border: $form-field-border-focus;
    box-shadow: $form-field-box-shadow-focus;
  }

  &::placeholder {
    color: $form-field-placeholder-color;
    opacity: 1;
  }

  &:disabled {
    @include disabled-field;
  }

  &[readonly] {
    @include read-only-field;
  }

  .FormGroup--floatingLabel & {
    padding-top: 15px;
    font-size: rem(15px);
  }

  .FormGroup--floatingLabel &::placeholder {
    color: transparent;
  }

  &::-ms-clear {
    display: none;
  }

  &:invalid {
    box-shadow: none;
  }
}

@mixin form-field-select {
  @include form-field-base;
  padding-right: $spacer-xl;
  background-image: svg-url(map-get($icons, arrowDown));
  background-repeat: no-repeat;
  background-position: calc(100% - 0.8rem) center;
  background-size: 0.8rem;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

@mixin form-field-size ($height, $font-size) {
  height: $height;
  padding: 0 $height * 0.2;
  line-height: normal;
  font-size: $font-size;
}

@mixin state-variation($state) {
  .has-#{$state} &,
  &--#{$state} {
    @content;
  }
}

@mixin form-field-error {
  @include state-variation('error') {
    background-image: svg-url(map-get($icons, danger));
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    background-size: 3px 14px;
    box-shadow: $form-field-box-shadow-error;
    border: $form-field-border-error;
  }
}

@mixin form-field-success {
  @include state-variation('success') {
    background-image: svg-url(map-get($icons, success));
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    background-size: 16px 13px;
    box-shadow: $form-field-box-shadow-success;
    border: $form-field-border-success;
  }
}

@mixin select-error {
  @include state-variation('error') {
    border: $form-field-border-error;
    box-shadow: $form-field-box-shadow-error;
  }
}

@mixin select-success {
  @include state-variation('success') {
    border: $form-field-border-success;
    box-shadow: $form-field-box-shadow-success;
  }
}