@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'sass:math';

@include b(popper) {
  @include set-component-css-var('popper', $popper);
}

@include b(popper) {
  position: absolute;
  border-radius: getCssVar('popper', 'border-radius');
  padding: 5px 11px;
  z-index: 2000;
  font-size: 12px;
  line-height: 20px;
  overflow-wrap: break-word;
  visibility: visible;

  $arrow-selector: #{& + '__arrow'};

  .el-select__selected-item {
    max-width: none;
  }

  @include when(dark) {
    color: getCssVar('bg-color');
    background: getCssVar('text-color', 'primary');
    border: 1px solid getCssVar('text-color', 'primary');
    padding: 12px;
    max-width: 450px;

    #{$arrow-selector}::before {
      border: 1px solid getCssVar('text-color', 'primary');
      background: getCssVar('text-color', 'primary');
      right: 0;
    }
  }

  @include when(light) {
    background: getCssVar('bg-color', 'overlay');
    border: 1px solid getCssVar('popper', 'border-color');
    box-shadow:
      0 86px 24px 0 rgba(0, 0, 0, 0),
      0 55px 22px 0 rgba(0, 0, 0, 0.01),
      0 31px 19px 0 rgba(0, 0, 0, 0.02),
      0 14px 14px 0 rgba(0, 0, 0, 0.03),
      0 3px 8px 0 rgba(0, 0, 0, 0.04);

    #{$arrow-selector}::before {
      border: 1px solid getCssVar('popper', 'border-color');
      background: getCssVar('bg-color', 'overlay');
      right: 0;
    }
  }

  @include when(pure) {
    padding: 0;
  }

  $arrow-size: 10px;

  @include e(arrow) {
    position: absolute;
    width: $arrow-size;
    height: $arrow-size;
    z-index: -1;

    &::before {
      position: absolute;
      width: $arrow-size;
      height: $arrow-size;
      z-index: -1;
      content: ' ';
      transform: rotate(45deg);
      background: getCssVar('text-color', 'primary');
      box-sizing: border-box;
    }
  }

  $placements: (
    'top': 'bottom',
    'bottom': 'top',
    'left': 'right',
    'right': 'left',
  );

  @each $placement, $opposite in $placements {
    &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
      #{$opposite}: math.div(-$arrow-size, 2);

      &::before {
        @if $placement == top {
          border-bottom-right-radius: 2px;
        }
        @if $placement == bottom {
          border-top-left-radius: 2px;
        }
        @if $placement == left {
          border-top-right-radius: 2px;
        }
        @if $placement == right {
          border-bottom-left-radius: 2px;
        }
      }
    }
  }

  @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
    &[data-popper-placement^='#{$placement}'] {
      #{$arrow-selector}::before {
        border-#{$placement}-color: transparent !important;
        border-#{$adjacency}-color: transparent !important;
      }
    }
  }

  &[data-popper-placement$='-end'] > #{$arrow-selector} {
    // left: auto !important;
    // right: 10px !important;
  }

  &[data-popper-placement$='-start'] > #{$arrow-selector} {
    // right: auto !important;
    // left: 10px !important;
  }
}