@use 'sass:map';

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

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

$dropdown-item-padding: () !default;
$dropdown-item-padding: map.merge(
  (
    'large': 7px 20px,
    'default': 5px 16px,
    'small': 2px 12px,
  ),
  $dropdown-item-padding
);

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

$dropdown-caret-width: () !default;
$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);

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

@include b(dropdown) {
  @include e(trigger) {
    list-style: none;
    &::-webkit-details-marker {
      display: none;
    }
  }

  @include e(popper) {
    padding: 0;
    background: #ffffff;
    box-shadow: var(--sg-dropdown-menu-box-shadow);
    border-radius: var(--sg-dropdown-menu-box-radius);

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

    @include e(item) {
      display: flex;
      align-items: center;
      white-space: nowrap;
      list-style: none;
      line-height: normal;
      padding: 7px 12px;
      margin: 0;
      font-size: var(--sg-font-size-base);
      color: var(--sg-text-color-primary);
      cursor: pointer;
      outline: none;
      &:not(.is-disabled):hover {
        background-color: var(--sg-dropdown-menuItem-hover-fill);
      }
      &.is-selected {
        background-color: var(--sg-dropdown-menuItem-hover-fill);
        color: var(--sg-dropdown-menuItem-hover-color);
      }
      &.is-disabled {
        cursor: not-allowed;
        color: var(--sg-text-color-disabled-base);
      }
      &.is-divided {
        border-top: 1px solid var(--sg-border-color-lighter);
      }
      i {
        margin-right: 5px;
      }
    }

    .popper-arrow,
    .popper-arrow::before {
      position: absolute;
      width: 8px;
      height: 8px;
      background: inherit;
      z-index: -1;
    }

    .popper-arrow {
      visibility: hidden;
      background: #ffffff;
      box-shadow: var(--sg-dropdown-menu-box-shadow);
    }

    .popper-arrow::before {
      visibility: visible;
      content: '';
      transform: rotate(45deg);
    }

    &[data-popper-placement^='top'] > .popper-arrow {
      bottom: -4px;
    }
    &[data-popper-placement^='bottom'] > .popper-arrow {
      top: -4px;
    }
    &[data-popper-placement^='left'] > .popper-arrow {
      right: -4px;
    }
    &[data-popper-placement^='right'] > .popper-arrow {
      left: -4px;
    }
  }

  .is-simple {
    width: inherit;
    margin: 10px 0;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
  }

  display: inline-flex;
  position: relative;
  color: var(--sg-text-color-primary);
  font-size: var(--sg-font-size-base);
  line-height: 1;
  vertical-align: top;

  .#{$namespace}-dropdown-selfdefine {
    // 自定义
    outline: none;
  }
}