// Custom css-styles for react-select
// Docs: https://react-select.com/styles

html {
  $menuBackgroundColor: $contentColor;

  --select-menu-bgc: #{$menuBackgroundColor};
  --select-menu-border-color: #{$halfGray};
  --select-option-selected-color: #{$inputOptionHoverColor};
  --select-option-focused-bgc: #{$colorInfo};
  --select-option-focused-color: #{$textColorAccent};

  .Select {
    position: relative;
    min-width: 220px;

    

    * {
      color: inherit;
    }

    &--is-disabled {
      opacity: .75;
      cursor: not-allowed;
      pointer-events: none;
    }

    &__control {
      border: none;
      border-radius: $radius;
      background: transparent;
      min-height: 0;
      box-shadow: 0 0 0 1px $halfGray;
      cursor: pointer;

      &--is-focused {
        box-shadow: 0 0 0 1px $primary;
      }
    }

    &__value-container {
      margin-bottom: 1px;
    }

    &__single-value {
      color: var(--textColorSecondary);
    }

    &__indicator {
      padding: $padding /2;
      opacity: .55;

      &:hover {
        color: inherit;
        opacity: 1;
      }

      &-separator {
        display: none;
      }
    }

    &__dropdown {
      &-indicator {
        color: inherit !important;
        padding: $padding / 2;
      }
    }

    &__menu {
      background: var(--select-menu-bgc);
      box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
      width: max-content;
      min-width: 100%;

      &-list {
        padding: 6px;
        width: max-content;
        min-width: 100%;
      }

      &-notice {
        padding: $padding / 3;
      }
    }

    &__option {
      white-space: nowrap;
      cursor: pointer;

      &:active {
        background: $primary;
      }

      &--is-selected {
        background: var(--menuSelectedOptionBgc);
        color: var(--select-option-selected-color);
      }

      &--is-focused {
        color: var(--select-option-focused-color);
        background: var(--select-option-focused-bgc);
      }

      &--is-disabled {
        cursor: not-allowed;
        background: none !important;
        color: inherit;
        opacity: .75;
      }

      .Icon {
        transition: none;
      }
    }

    &__value-container {
      &--is-multi {
      }

      &--has-value {
      }
    }

    &__multi-value {
      background: $layoutBackground;

      &__remove {
        background: inherit;

        &:hover {
          background: $colorError;
          color: $textColorAccent;
        }
      }
    }
  }

  //-- Themes

  .Select__menu {
    z-index: $zIndex-select-portal; // render at the top when used inside dialog
  }

  .Select, .Select__menu {
    &.theme-light {
      --select-menu-bgc: white;
      --select-option-selected-color: $textColorSecondary;

      .Select {
        &__multi-value {
          background: none;
          box-shadow: 0 0 0 1px $textColorSecondary;
        }

        &__option {
          &:active {
            color: white;
          }

          &:hover {
            color: white;
          }

          &--is-focused {
            color: white;
          }

          &--is-disabled:hover {
            color: inherit;
          }
        }
      }
    }

    &.theme-outlined {
      .Select__control {
        box-shadow: 0 0 0 1px $colorVague;
        color: $primary;

        .Select__value-container {
          padding: 0 $padding / 2;
        }

        .Select__dropdown-indicator {
          padding: 3px;
        }
      }
    }

    &.theme-lens {
      :hover {
        &.Select__control {
          box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
        }
      }

      :focus-within {
        &.Select__control {
          box-shadow: 0 0 0 1px $colorInfo;
        }
      }

      &.Select__menu {
        box-shadow: inset 0 0 0 1px var(--inputControlBorder);
      }

      .Select {
        &__control {
          box-shadow: 0 0 0 1px var(--inputControlBorder);
          background: var(--inputControlBackground);
          border-radius: 5px;
        }

        &__single-value {
          color: var(--textColorTertiary);
        }

        &__menu {
          &-list {
            padding: 6px;
          }
        }

        &__option {
          border-radius: 4px;

          &:active {
            background: var(--inputControlBackground);
          }

          &--is-selected {
            background: var(--inputControlBackground);
            color: var(--textColorAccent);
          }

          &--is-focused {
            color: var(--textColorPrimary);
            background: var(--inputControlBackground);
          }
        }
      }
    }
  }
}