@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$dropdown: () !default;
$dropdown: map.merge(
  (
    color-selected: value('color-primary-base'),
    color-disabled: value('content-color-disabled'),
    bg-color: value('bg-color-base'),
    bg-color-hover: value('fill-color-hover'),
    bg-color-active: value('dropdown-bg-color-hover'),
    b-color: value('border-color-light-2'),
    radius: value('radius-base'),
    s-color: value('shadow-color-base'),
    shadow: value('shadow-shape') value('dropdown-s-color'),
    d-color: value('border-color-light-2'),
    divider: value('border-shape') value('dropdown-d-color')
  ),
  $dropdown
);

.#{$namespace}-dropdown {
  &-vars {
    @include define-preset-values('dropdown', $dropdown);
  }

  @include basis {
    display: inline-block;
  }

  @include inherit-color;

  &__trigger {
    display: flex;
    min-width: 100%;
    height: 100%;
  }

  &__popper--nested {
    padding: 0;
  }

  & &,
  &__popper & {
    width: 100%;
  }

  &__list {
    display: inline-block;
    min-width: 70px;
    padding: 5px 0;
    margin: 0;
    user-select: none;
    background-color: value('dropdown-bg-color');
    border: value('border-shape') value('dropdown-b-color');
    border-radius: value('dropdown-radius');
    box-shadow: value('dropdown-shadow');
  }

  &__item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 16px;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    background-color: transparent;
    outline: 0;
    transition: value('transition-background');

    &:hover,
    &:focus {
      background-color: value('dropdown-bg-color-hover');
    }

    &--selected {
      color: value('dropdown-color-selected');
    }

    &--disabled {
      color: value('dropdown-color-disabled');
      cursor: not-allowed;

      &:hover,
      &:focus {
        background-color: transparent;
      }
    }

    &--divided {
      margin-bottom: 10px;

      &::after {
        position: absolute;
        bottom: calc(-5px - 0.5px);
        left: 0;
        display: block;
        width: 100%;
        height: 0;
        content: '';
        border-bottom: value('dropdown-divider');
      }
    }
  }

  &__trigger &__item {
    width: 100%;
  }

  &__trigger--active &__item {
    background-color: value('dropdown-bg-color-active');
  }
}