@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$dropdown-caret-width: () !default;
$dropdown-caret-width: map.merge(
  (
    'large': 28px,
    'default': 20px,
    'small': 14px,
  ),
  $dropdown-caret-width
);

$dropdown-item-line-height: () !default;
$dropdown-item-line-height: map.merge(
  (
    'large': 24px,
    'default': 20px,
    'small': 18px,
  ),
  $dropdown-item-line-height
);

$dropdown-item-font-size: () !default;
$dropdown-item-font-size: map.merge(
  (
    'large': 18px,
    'default': 16px,
    'small': 14px,
  ),
  $dropdown-item-font-size
);

$dropdown-item-padding: () !default;
$dropdown-item-padding: map.merge(
  (
    'large': 10px 16px,
    'default': 8px 12px,
    'small': 6px 8px,
  ),
  $dropdown-item-padding
);

$dropdown-item-divided-margin: () !default;
$dropdown-item-divided-margin: map.merge(
  (
    'large': 12px -8px,
    'default': 8px -8px,
    'small': 4px -8px,
  ),
  $dropdown-item-divided-margin
);

$dropdown-divider-width: 1px !default;

@include b(dropdown) {
  // @include set-component-css-var('dropdown', $dropdown);

  display: inline-flex;
  align-items: center;
  position: relative;

  @include e(popper) {
    // @include set-component-css-var('dropdown', $dropdown);

    // using attributes selector to override

    @include picker-popper(
      getCssVar('color-white'),
      1px solid getCssVar('color-neutral-2'),
      getCssVar('box-shadow-lv2')
    );

    .#{$namespace}-dropdown-menu {
      border: none;
    }

    #{& + '-selfdefine'} {
      outline: none;
    }

    @include b(scrollbar__bar) {
      z-index: 2;
    }

    @include b(dropdown__list) {
      list-style: none;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  }

  .#{$namespace}-dropdown-selfdefine {
    outline: none;
  }

  & .#{$namespace}-dropdown__caret-button {
    height: auto;
    border-left: 1px solid getCssVar('color-neutral-2');

    .#{$namespace}-icon {
      font-size: map.get($dropdown-caret-width, 'default');
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      .#{$namespace}-dropdown__caret-button {
        .#{$namespace}-icon {
          font-size: map.get($dropdown-caret-width, $size);
        }
      }
    }
  }
}

@include b(dropdown-menu) {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 8px;
  margin: 0;
  background-color: getCssVar('color-white');
  border: none;
  border-radius: getCssVar('border-radius-md');
  box-shadow: none;
  list-style: none;

  @include e(item) {
    display: flex;
    align-items: center;
    white-space: nowrap;
    list-style: none;
    line-height: map.get($dropdown-item-line-height, 'default');
    padding: map.get($dropdown-item-padding, 'default');
    margin: 0;
    font-size: map.get($dropdown-item-font-size, 'default');
    font-weight: 600;
    color: getCssVar('color', 'neutral-9');
    cursor: pointer;
    outline: none;
    border-radius: getCssVar('border-radius-sm');

    &:not(.is-disabled):focus {
      background-color: getCssVar('color-primary-1');
      color: getCssVar('color-primary-3');
    }

    .#{$namespace}-icon {
      margin-right: map.get($dropdown-item-font-size, 'default') * 0.5;
    }

    @include m(divided) {
      margin: map.get($dropdown-item-divided-margin, 'default');
      border-top: 1px solid getCssVar('color-neutral-2');
    }

    @include when(disabled) {
      cursor: not-allowed;
      color: getCssVar('color-neutral-5');
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      @include e(item) {
        padding: map.get($dropdown-item-padding, $size);
        line-height: map.get($dropdown-item-line-height, $size);
        font-size: map.get($dropdown-item-font-size, $size);

        @include m(divided) {
          margin: map.get($dropdown-item-divided-margin, $size);
        }

        .#{$namespace}-icon {
          margin-right: map.get($dropdown-item-font-size, $size) * 0.5;
        }
      }
    }
  }
}