// Input
$input-border-color:          $border-color;
//FIXME: Add correct rem
$input-padding-x:             $spacing-element-12;
$input-padding-y:             2.5rem;
$input-padding-y-sm:          1.75rem;
$input-padding-x-sm:          $spacing-element-12;
$input-border-radius:         $border-radius;
$input-background-color:      get-colour(white);

// REMOVE success-01 and danger-01
$form-validation-states: (
  'valid': (
    'background-color': 'success-01',
    'border-color' : 'success'
  ),
  'invalid': (
    'background-color': 'danger-01',
    'border-color' : 'danger'
  ),
);

.form-control {

  &, &:focus {
    color: get-colour(grey-800);
    color: Var(--sdds-grey-800);
  }

  //FIXME: Add correct rem
  font-size: 3.5rem;
  line-height: $spacing-element-16;
  font-weight: 400;
  height: auto;
  border-radius: $input-border-radius;
  padding: $input-padding-y $input-padding-x;
  background-color: $input-background-color;
  border-color: $input-border-color;

  &:focus {
    border-color: get-colour(information);
    background-color: get-colour(grey-500);
    box-shadow: none;
  }

  // Override browser autocomplete background color
  &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px white inset;
    box-shadow: 0 0 0 50px white inset;
  }

  &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: get-colour(grey-400);
    opacity: 1; /* Firefox */
  }
  // needs to keep separated to make it works
  &:-ms-input-placeholder { /* Internet Explorer 10-11 & Edge */
    color: get-colour(grey-400);
  }

  &[readonly] {
    background-color: $input-background-color;
    border: 0;
    border-bottom: 1px solid get-colour(grey-400);
    border-bottom: 1px solid Var(--sdds-grey-400);
    padding-left: 0;
    border-radius: 0;
    //FIXME: Add correct rem
    line-height: 5.25rem;
    opacity: 0.8;
  }

  &:disabled,
  &.disabled,
  &[disabled] {
    background-color: Var(--sdds-grey-100);
    color: Var(--sdds-grey-400);
    border-color: Var(--sdds-grey-100);
  }
}

.form-control-lg {
   //FIXME: Add correct rem
  font-size: 5.25rem;
  line-height: 7rem;
}

.form-control-sm {
  //FIXME: Add correct rem
  font-size: $spacing-element-12;
  line-height: 3.5rem;
  padding: $input-padding-y-sm $input-padding-x-sm;
}

select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTIiIGhlaWdodD0iNjMiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEwNS4wOTcwMDAxNDA0Mjg1NSwyLjc2NTY1NTQ4MjQwNjI1OTZlLTggTDU2LjA4NDAwMDE0MDQyODU0LDQ5LjAxMjAwMDAyNzY1NjU3IEw3LjA3MTAwMDE0MDQyODUzOCwyLjc2NTY1NTQ4MjQwNjI1OTZlLTggbC03LjA3MSw3LjA3MSBMNTYuMDg0MDAwMTQwNDI4NTQsNjMuMTU1MDAwMDI3NjU2NTQgbDU2LjA4MywtNTYuMDg0IHoiLz48L3N2Zz4=);
  background-repeat: no-repeat;
  //FIXME: Add correct rem
  background-size: $spacing-element-12;
  background-position: calc(100% - 3rem) center;
  padding-right: 40px;
}

// remove default arrow in IE10+
select::-ms-expand {
  display: none;
}

select.form-control[multiple] {
  background-image: none;
}

textarea.form-control,
select.form-control[multiple] {
  padding: $input-padding-x;
}

// Form validation
@mixin form-validation-state($state, $data) {
  .#{$state}-feedback {
    border: 1px solid get-colour(grey-500);
    border-left: 5px solid map-get($interaction-colors, map-get($data, 'border-color'));
    color: get-colour(grey-800);
    line-height: normal;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    //FIXME: Add correct rem
    padding: $spacing-element-8;
    border-radius: 5px;
  }

  .form-control {

    &.is-#{$state},
    .was-validated &:#{$state} {
      background-image: none;
      //FIXME: Add correct rem
      padding-right: $spacing-element-12;

      @each $key, $value in $data {
        #{$key} : map-get($interaction-colors, $value);
        #{$key} : Var(--#{$value});
      }

      &:focus {
        box-shadow: none;
        border-color: map-get($interaction-colors, map-get($data, 'border-color'));
        border-color: Var(--(map-get($data, 'border-color')));
      }
    }
  }
}

@each $state, $data in $form-validation-states {
  @include form-validation-state($state, $data);
}

// Checkboxes and radios

.form-check-label {
  margin-left: 2.5rem;
}