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

@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;
  min-width: 10px;
  overflow-wrap: break-word;
  visibility: visible;

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

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

    > #{$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('border-color', 'light');

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

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

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

    &::before {
      position: absolute;
      width: 10px;
      height: 10px;
      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}: -5px;

      &::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;
      }
    }
  }
}