/* -------------------------------------------- */
/* MIXINS                                       */
/* -------------------------------------------- */
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details

// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
  @if ($state == "valid" or $state == "invalid") {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  } @else {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  }
}

@mixin form-dropdown-and-select($type) {

  padding: $input-padding-y $input-padding-x;
  font-family: $form-select-font-family;
  @include font-size($input-font-size);

  font-weight: $form-select-font-weight;
  line-height: $form-select-line-height;
  color: $input-placeholder-color;
  background-color: $form-select-bg;
  border: $form-select-border-width solid $form-select-border-color;

  @if $type == 'dropdown' {
    display: flex;
    text-align: left;
    justify-content: space-between;
    align-items: center;

  } @else {

    background-repeat: no-repeat;
    background-position: right $input-height-inner-quarter center;
    background-image: $form-select-indicator;
    background-size:$form-select-bg-size;

  }



}

@mixin form-validation-state(
  $state,
  $color,
  $icon,
  $focus-box-shadow: 0 // 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {

  .#{$state}-fb {
    display: none;
    width: 100%;
    margin-top: $form-feedback-margin-top;
    @include font-size($form-feedback-font-size);
    font-style: $form-feedback-font-style;
    color: $color;
  }

  @include form-validation-state-selector($state) {
    ~ .#{$state}-fb {
      display: block;
    }
  }

  .fm-dropdown {
    @include form-validation-state-selector($state) {
      border-color: $color;

      &:hover {
        border-color: $black;
      }

      > button {
        border-color: $color;

        @if $enable-validation-icons {
          background-image: url($icon);
          background-size: $input-height-inner-half $input-height-inner-half;
        }

        &:focus {
          border-color: $color;
          box-shadow: none;
          // box-shadow: $focus-box-shadow;
        }

        &:hover {
          background-image: var(--#{$prefix}svg-plus);
          border-color: $black;
        }
      }

      &.fm-lined  {
        box-shadow: none;
        border-color: $color;

        ~ button {
          border-color: $color;
          color: $body-color;
        }

        @if $enable-validation-icons {
          background-position: right 1px center;
        }
      }

    }
  }

  .fm-number {
    @include form-validation-state-selector($state) {
      border-color: $color;

      .fm-input {
        border-color: $color;
      }
    }
  }

  .fm-input {
    @include form-validation-state-selector($state) {
      border-color: $color;

      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-image: url($icon);
        background-repeat: no-repeat;
        background-position: right $input-height-inner-quarter center;
        background-size: $input-height-inner-half $input-height-inner-half;
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }


      &.fm-lined,
       .fm-group.fm-lined & {
        box-shadow: none;
        border-color: $color;

        ~ .btn {
          border-color: $color;
          color: $body-color;

          &:focus {
            box-shadow: none;
          }

          &:disabled {
            border-color: $color;
          }
        }

        @if $enable-validation-icons {
          background-position: right $input-height-inner-quarter center;
        }
      }

    }
  }


  // stylelint-disable-next-line selector-no-qualifying-type
  textarea.fm-input {
    @include form-validation-state-selector($state) {
      @if $enable-validation-icons {
        padding-right: $input-height-inner;
        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
      }
    }
  }

  .fm-select {
    @include form-validation-state-selector($state) {
      border-color: $color;


      @if $enable-validation-icons {
        &:not([multiple]):not([size]),
        &:not([multiple])[size="1"] {
          padding-right: $input-height-inner;
          background-image: url($icon);
          background-position: right 1px center, $form-select-feedback-icon-position;
          background-size: 18px;
        }
      }

      &:focus {
        border-color: $color;
        box-shadow: $focus-box-shadow;
      }

      &.fm-lined,
       .fm-group.fm-lined & {
        box-shadow: none;
        border-color: $color;

        @if $enable-validation-icons {
          background-position: right 1px center;
        }
      }
    }
  }

  .fm-color {
    @include form-validation-state-selector($state) {
      @if $enable-validation-icons {
        width: add($form-color-width, $input-height-inner);
      }
    }
  }

  .fm-checkbox,
  .fm-radio {
    @include form-validation-state-selector($state) {
      border-color: $color;

      &:checked {
        background-image: none;
      }

      &:focus {
        box-shadow: none; // $focus-box-shadow;
      }

      ~ .fm-label {
        color: $color;
      }
    }
  }

  .fm-check-inline .fm-check {
    ~ .#{$state}-feedback {
      margin-left: .5em;
    }
  }

  .fm-group {
    > .fm-input:not(:focus),
    > .fm-select:not(:focus),
    > .fm-float:not(:focus-within) {

      @include form-validation-state-selector($state) {
        @if $state == "valid" {
          z-index: 3;
        } @else if $state == "invalid" {
          z-index: 4;
        }
      }
    }

  }
}
// scss-docs-end form-validation-mixins