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

@include b(popper) {
  position: absolute;
  border-radius: getCssVar('border-radius-md');
  padding: 8px;
  z-index: 2000;
  min-width: 32px;
  word-wrap: break-word;
  visibility: visible;

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

  @include when(dark) {
    color: getCssVar('color-white');
    background: getCssVar('color-neutral-9');
    border: 1px solid getCssVar('color-neutral-9');

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

  @include when(light) {
    color: getCssVar('color-neutral-9');
    background: getCssVar('color-white');
    border: 1px solid getCssVar('color-neutral-2');
    box-shadow: getCssVar('box-shadow-lv2');

    #{$arrow-selector}::before {
      border: 1px solid getCssVar('color-neutral-2');
      background: getCssVar('color-white');
      right: 0;
    }
  }

  @include when(pure) {
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
  }

  @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('color-neutral-9');
      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;
      }
    }
  }
}