/**
 * AppBuckets UI
 *
 * _Select @ src/styles/elements/_select.scss
 *
 * Defined at 08 ott 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */
@use 'sass:math';


/******
    Internal Mixin
******/
@mixin __react-select-control-color($color) {
  /// Set the Box Shadow Color
  box-shadow: inset 0 0 0 $input-border-width $color;

  /// Set indicators Color to reflect current color
  .__indicators {
    /// Set the Icon separator
    .__indicator-separator {
      background-color: $color;
    }

    /// Set the angle down indicator
    .__indicator {
      color: $color;
    }
  }
}


/******
    Reflect Input Style
******/
.react-select {
  flex: 1 1 auto;
  width: inherit;
  max-width: 100%;
  min-width: 0;
  text-transform: none;


  // ----
  //  The Control Element is the Outer div
  //  that contain all elements of select
  // ----
  .__control {
    border: none;
    margin: 0;
    min-height: $computed-input-height;

    background-color: $input-background-color;
    border-radius: $input-border-radius;
    box-shadow: inset 0 0 0 $input-border-width $input-border-color;
  }


  // ----
  //  The value container is the div that contain placeholder
  //  Or selected value
  // ----
  .__value-container {
    padding-left: $input-horizontal-padding;
    padding-right: $input-horizontal-padding;

    /// Remove margin from all Child Div
    > div:not(.__multi-value) {
      margin: 0;
    }

    /// Set the Placeholder Style
    .__placeholder {
      font-weight: $regular;
      /// Reset Placeholder color according to Browser Style
      color: darkgray;
    }

    /// Set single value style equal to input text
    .__input > input,
    .__single-value {
      font-weight: $input-font-weight;
      color: inherit
    }

    /// Set multi value style
    > div.__multi-value {
      margin: math.div($select-multi-value-spacer, 2) $select-multi-value-spacer math.div($select-multi-value-spacer, 2) 0;
      background-color: $select-multi-value-background;
      border-radius: $select-multi-value-border-radius;

      > div {
        font-weight: $input-font-weight;
        color: $select-multi-value-color;
        border-radius: 0;
      }

      .__multi-value__label {
        padding: 0 $select-multi-value-label-padding;
        line-height: 2;
      }

      .__multi-value__remove {
        cursor: pointer;
        border-top-right-radius: $select-multi-value-border-radius;
        border-bottom-right-radius: $select-multi-value-border-radius;
        background-color: darken($select-multi-value-background, 8);

        @include hover {
          transition: background-color $transition-ease $transition-speed-fast;
          will-change: background-color;

          &:hover {
            background-color: darken($select-multi-value-background, 14);
          }
        }
      }
    }
  }
}


/******
    Set Select Style while Focused
******/
.select.field.focused .react-select .__control {
  background-color: $input-focus-background-color;
  @include __react-select-control-color($input-focus-border-color);
}


/******
    Set Select Disabled State
******/
.disabled.react-select {
  opacity: $disabled-element-opacity;
}


/******
    Set Colored Style
******/
.select.field {
  @each $label, $color in $ui-color-map {
    @if $label == 'danger' or $label == 'info' or $label == 'primary' or $label == 'secondary' or $label == 'success' or $label == 'warning' {
      .react-select.is-#{$label} .__control {
        @include __react-select-control-color($color)
      }
    } @else {
      &.focused .react-select.is-#{$label} .__control {
        @include __react-select-control-color($color)
      }
    }
  }
}


/******
    Set Field Icon
******/
.select.field {
  .content {
    /// Adjust React Select Padding to include icon
    &.icon-on-left {
      > .react-select .__value-container {
        padding-left: $input-horizontal-padding * 1.25 + $icon-width;
      }
    }

    &.icon-on-right {
      > .react-select .__control {
        padding-right: $input-horizontal-padding * .25 + $icon-width * 1.5;
      }
    }
  }
}


/******
    Set Actions
******/
.select.field {
  .wrapper {
    /// Adjust Border Radius
    &.action-on-left .react-select .__control {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.action-on-right .react-select .__control {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}