@import "./colors";

@mixin form-theme-mixin(
  $background,
  $color,
  $borderColor,
  $focusBorderColor,
  $focusBackground,
  $hoverBackground,
  $labelWeight,
  $labelColor,
  $requiredWeight,
  $requiredColor,
  $errorBorderColor,
  $placeholderColor
) {
  .va-form-need {
    font-weight: $requiredWeight;
    color: $requiredColor;
  }

  .va-has-error {
    .va-form-control {
      border-color: $errorBorderColor;
    }
  }

  .va-form-control {
    background: $background;
    color: $color;
    border-color: $borderColor;

    &::placeholder {
      color: $placeholderColor;
    }
  
    &:focus {
      border-color: $focusBorderColor;
      background: $focusBackground;
    }
  
    &:hover {
      background: $hoverBackground;
    }
  
  }

  .va-control-label {
    font-weight: $labelWeight;
    color: $labelColor;
  }
}

@include form-theme-mixin(
  $background: $N10,
  $color: $N900,
  $borderColor: $N40,
  $focusBorderColor: $B200,
  $focusBackground: $N0 !important,
  $hoverBackground: $N30,
  $labelWeight: 600,
  $labelColor: $N300,
  $requiredWeight: bold,
  $requiredColor: $R300,
  $errorBorderColor: $R400 !important,
  $placeholderColor: $N80
);

@mixin input-size($padding, $fontSize, $lineHeight, $borderRadius, $minHeight, $maxHeight) {
  padding: $padding;
  font-size: $fontSize;
  line-height: $lineHeight;
  border-radius: $borderRadius;
  min-height: $minHeight;
  max-height: $maxHeight;
}

@mixin input-focus-mixin($color, $opacity: 0.6) {

  &:focus {
    box-shadow: $color 0 0 0 2px;
    /* fallback */
    box-shadow: rgba($color, $opacity) 0 0 0 2px;
    outline: none;
  }
}

@mixin extraLargeInputSize() {
  @include input-size( $padding: 9px, $fontSize: 14px, $lineHeight: 1.75em, $borderRadius: 3px, $minHeight: 44px, $maxHeight: 44px);
}

@mixin largeInputSize() {
  @include input-size( $padding: 8px, $fontSize: 14px, $lineHeight: 1.7em, $borderRadius: 3px, $minHeight: 40px, $maxHeight: 40px);
}

@mixin defaultInputSize() {
  @include input-size( $padding: 7px, $fontSize: 14px, $lineHeight: 1.45em, $borderRadius: 3px, $minHeight: 34px, $maxHeight: 34px);
}

@mixin smallInputSize() {
  @include input-size( $padding: 6px, $fontSize: 13px, $lineHeight: 1.3em, $borderRadius: 3px, $minHeight: 30px, $maxHeight: 30px);
}

@mixin extraSmallInputSize() {
  @include input-size( $padding: 5px, $fontSize: 12px, $lineHeight: 1.2em, $borderRadius: 3px, $minHeight: 28px, $maxHeight: 28px);
}

/*sizes*/

.va-form-control {

  align-items: center;
  display: block;
  width: 100%;
  border-style: solid;
  border-width: 2px;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

  &:focus {
    outline: none;
  }
  // @include input-focus-mixin($B100, 0.2);

  @include defaultInputSize();
  &[readonly] {
    cursor: default;
    &:hover {
      cursor: default;
    }
  }

  &:-webkit-autofill {
    transition: background-color 0.5s ease-in-out 0s;
  }
}

textarea.va-form-control {
  max-height: unset;
  min-height: unset;
}

input[type="date"].va-form-control,
input[type="time"].va-form-control  {
  /**
  For some reason, if this is anything other than 'transparent',
  then Safari on iOS adopts a real ugly white>gray gradient, with an arrow
  to the right to indicate that this is a dropdown. WHY?
  */
  background: transparent;
}

input[type="file"].va-form-control {
  outline: none;

  &:focus {
    outline: none;
  }
}

.va-input-xl {
  .va-form-control {
    @include extraLargeInputSize();
  }
}

.va-input-lg {
  .va-form-control {
    @include largeInputSize();
  }
}

.va-input-sm {
  .va-form-control {
    @include smallInputSize();
  }
}

.va-input-xs {
  .va-form-control {
    @include extraSmallInputSize();
    font-weight: 500;
  }
}

.va-control-label {
  font-size: 12px;
  align-self: flex-start;
}

.va-form-horizontal .va-control-label {
  margin-bottom: 8px;
  text-align: left;
}

.va-form-need {
  position: relative;
  top: 3px;
  left: 1px;
  font-size: 16px;
  line-height: 1;
}

@media (min-width: 768px) {
  .va-form-inline {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    .va-form-group {
      display: inline-block;
      margin-bottom: 20px;
      margin-right: 6px;
      vertical-align: middle;

    }
    .va-form-control {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }
    .va-form-control-static {
      display: inline-block;
    }
    .va-control-label {
      margin-bottom: 0;
      vertical-align: top;
      font-size: 0.86em;
    }
  }
}

.va-form-group {
  margin: 0 0 15px;
}

.va-form-horizontal .va-form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media (min-width: 768px) {
  .va-form-horizontal .va-control-label {
    margin: 0;
    text-align: right;
  }
}

/*validation*/

@mixin validationDefaults() {
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: -19px !important;
  right: 0 !important;
  bottom: initial !important;
  left: initial !important;
}

.va-err-tip {
  @include validationDefaults();
  color: $R400;
}

/**
Input theme mixin.
*/
@mixin form-control-input-theme(
  $selector,
  $backgroundColor,
  $color,
  $focusBorderColor,
  $focusBGColor,
  $hoverBGColor
) {
  .va-form-control-#{$selector} {
    background-color: $backgroundColor;
    color: $color;
    &:focus {
      border-color: $focusBorderColor;
      background-color: $focusBGColor;
    }
    &:hover {
      background-color: $hoverBGColor;
    }
  }
}

/**
Input themes. Default is 'primary' in VaInput.vue.
*/
@include form-control-input-theme('default', revert, revert, $N100, revert, revert);
@include form-control-input-theme('primary', revert, revert, $B200, revert, revert);
@include form-control-input-theme('purple', revert, revert, $P100, revert, revert);
@include form-control-input-theme('success', revert, revert, $G200, revert, revert);
@include form-control-input-theme('warning', revert, revert, $Y200, revert, revert);
@include form-control-input-theme('danger', revert, revert, $R200, revert, revert);