// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "refactor/common-refactor.scss" as deprecated;

.custom-select {
  --custom-select-border-color: var(--menu-background-color);
  --custom-select-bg-color: var(--menu-background-color);
  --custom-select-icon-color: var(--color-foreground-secondary);
  --custom-select-text-color: var(--menu-foreground-color);

  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: deprecated.$s-32;
  width: 100%;
  margin: 0;
  padding: deprecated.$s-8;
  border-radius: deprecated.$br-8;
  background-color: var(--custom-select-bg-color);
  border: deprecated.$s-1 solid var(--custom-select-border-color);
  color: var(--custom-select-text-color);
  cursor: pointer;

  &:hover {
    --custom-select-bg-color: var(--menu-background-color-hover);
    --custom-select-border-color: var(--menu-background-color);
    --custom-select-icon-color: var(--menu-foreground-color-hover);
  }

  &:focus {
    --custom-select-bg-color: var(--menu-background-color-focus);
    --custom-select-border-color: var(--menu-background-focus);
  }
}

.theme-options {
  margin-bottom: 0;
}

.group {
  @include deprecated.text-ellipsis;

  display: block;
  padding: deprecated.$s-8;
  color: var(--color-foreground-secondary);
}

.disabled-select {
  --custom-select-bg-color: var(--menu-background-color-disabled);
  --custom-select-border-color: var(--menu-border-color-disabled);
  --custom-select-icon-color: var(--menu-foreground-color-disabled);
  --custom-select-text-color: var(--menu-foreground-color-disabled);

  pointer-events: none;
  cursor: default;
}

.dropdown-button {
  @include deprecated.flex-center;

  color: var(--color-foreground-secondary);
}

.current-icon {
  @include deprecated.flex-center;

  width: deprecated.$s-24;
  padding-right: deprecated.$s-4;
}

.custom-select-dropdown {
  @extend %dropdown-wrapper;
}

.separator {
  margin: 0;
  height: deprecated.$s-2;
  border-block-start: deprecated.$s-1 solid
    color-mix(in hsl, var(--color-foreground-secondary) 20%, transparent);
}

.custom-select-dropdown[data-direction="up"] {
  bottom: deprecated.$s-32;
  top: auto;
}

.sub-item {
  padding-left: deprecated.$s-16;
}

.checked-element-button {
  @extend %dropdown-element-base;

  position: relative;
  display: flex;
  justify-content: space-between;
  padding-right: 0;
}

.checked-element {
  @extend %dropdown-element-base;

  &.is-selected {
    color: var(--menu-foreground-color);
  }

  &.disabled {
    display: none;
  }
}

.check-icon {
  @include deprecated.flex-center;

  color: var(--icon-foreground-primary);
  visibility: hidden;
}

.label {
  flex-grow: 1;
  width: 100%;
}

.check-icon-visible {
  visibility: visible;
}

.current-label {
  @include deprecated.text-ellipsis;
}

.dropdown-portal {
  --menu-max-height: #{deprecated.$s-400};

  @extend %new-scrollbar;

  position: absolute;
}