@import '~@invisionag/iris-settings/settings';
@import '~@invisionag/injixo-tokens/injixo';
@import '~@invisionag/iris-tools/tools';

$select-input-placeholder: $injixo-color-typography-100;
$select-text-color: $injixo-color-typography-200;

$select-item-color: $iris-font-size;
$select-item-font-size: $iris-font-size;
$select-item-hover-color: $injixo-color-typography-200;

$select-input-bg: $injixo-color-ui-100;
$select-input-bg-disabled: $injixo-color-ui-100;

$select-input-border-radius: 0;
$select-input-hover-box-shadow: 0 none;
$select-input-border-color: $injixo-color-ui-300;
$select-input-border-focus: $injixo-color-primary-100;
$select-input-border-radius: 0 none;
$select-input-border-width: 0;

$select-option-color: $injixo-color-typography-200;
$select-option-bg: $injixo-color-ui-0;
$select-option-selected-bg: $injixo-color-ui-0;
$select-option-selected-color: $injixo-color-primary-100 !important; // important because of hover > selected
$select-option-disabled-color: $injixo-color-typography-200;
$select-option-focused-bg: $injixo-color-ui-100;

$select-input-height: 100%;
$select-input-internal-height: 100%;

$select-padding-vertical: $iris-spacing-small;
$select-padding-horizontal: $iris-spacing-small;

$iris-select-menu-max-height-items-count: 5.5;

$select-clear-width: $iris-spacing;
$select-arrow-width: $iris-spacing;

$iris-select-border-width: 1px;

/* stylelint-disable indentation  */
// prettier > stylelint
$iris-select-menu-max-height: (
    ($iris-spacing-small * 2) + ($iris-font-size * $iris-line-height)
  ) * $iris-select-menu-max-height-items-count;
/* stylelint-enable */

$select-menu-max-height: calc(
  #{$iris-select-menu-max-height} + #{4 * $iris-select-border-width}
);

@import '~react-select/scss/default.scss';

.Select {
  &-control {
    cursor: pointer;
    padding: $iris-spacing-small;
    line-height: 1.15 !important;

    .is-disabled & {
      cursor: not-allowed;
      opacity: 0.45;
    }

    .is-focused & {
      outline: 2px solid $injixo-color-primary-100;
    }

    .is-open & {
      outline: 2px solid $injixo-color-primary-100;
    }

    .is-searchable & {
      line-height: 1 !important;
    }
  }

  &-input {
    padding-left: 0;
    padding-right: 0;

    input {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  &-placeholder,
  &-value {
    padding: $iris-spacing-small;
    line-height: 1.15 !important;
    padding-right: $iris-spacing-large !important;
  }

  &.is-clearable {
    .Select-placeholder,
    .Select-value {
      padding-right: $iris-spacing-large + 1rem !important;
    }
  }

  &.Select--multi {
    &.has-value .Select-control {
      padding: 1px $iris-spacing-small !important;
    }

    .Select-value {
      border-radius: 0;
      background-color: $injixo-color-ui-400;
      border: none;
      color: $injixo-color-typography-0;
      padding: 0 !important;
      margin: $iris-spacing-tiny;
    }

    .Select-value-icon {
      border: none;

      &:hover {
        background-color: $injixo-color-ui-400;
        color: $injixo-color-typography-0;
      }
    }
  }

  &-clear-zone {
    text-align: right;
  }

  &-menu {
    /* stylelint-disable declaration-colon-newline-after  */
    max-height: calc(
      #{$iris-select-menu-max-height} - #{2 * $iris-select-border-width}
    );
    /* stylelint-enable declaration-colon-newline-after */
  }

  &-menu-outer {
    background: $injixo-color-ui-0;

    .is-open & {
      border: #{$iris-select-border-width} solid $injixo-color-ui-300;
      border-top: #{$iris-select-border-width} solid $injixo-color-ui-300;

      [role='listbox'] {
        margin-bottom: calc(#{$iris-select-border-width} + #{$iris-spacing});
      }
    }
  }

  &-arrow-zone {
    width: $iris-spacing;
    padding: 0;
  }
}

.iris-dropdown {
  margin-right: 0;
  border-bottom: 1px solid $injixo-color-ui-300;

  &__arrow {
    color: $injixo-color-typography-200;
    line-height: 0;

    &:hover {
      color: $injixo-color-primary-100;
    }

    .is-disabled & {
      color: $injixo-color-typography-200;
    }
  }

  &__clear {
    color: $injixo-color-typography-200;
    margin-right: $iris-spacing-small;
    line-height: 0;
    width: 100%;

    &:hover {
      cursor: pointer;
      color: $injixo-color-typography-200;
    }
  }

  &__entry {
    &__searched-term {
      font-weight: $injixo-typography-weight-bold;
    }

    &--inset {
      padding-left: $iris-spacing;
    }
  }

  .separator {
    border-bottom: #{$iris-select-border-width} solid $injixo-color-ui-300;
    height: 0;
    padding: 0;
    margin: 0 $iris-spacing;
  }

  &--error {
    border-bottom: none !important;
  }
}