@use "sass:math";
@use "@befe/brick-style/src/themes/base";
@use "@befe/brick-style/src/themes/popper";

.brick-popper {
  @include base.reset();
  &-wrap {
    position: absolute;
    z-index: base.$zindex-popper;
  }
  &-inner {
    @include popper.popper-box();
  }
  &-with-arrow &-inner {
    padding: popper.$popper-with-arrow-padding-vertical popper.$popper-with-arrow-padding-horizontal;
  }
  &-hidden &-wrap {
    // Note: avoid using properties like display: none.
    // This doesn't allow Popper to read its dimensions which can cause jitter issues.
    visibility: hidden;
    pointer-events: none;
  }

  &-arrow {
    @include popper.popper-arrow(popper.$popper-arrow-box-size);
  }

  &-placement {
    $half-popper-arrow-box-size: math.div(popper.$popper-arrow-box-size, 2);
    &-top, &-bottom {
      .brick-popper-arrow {
        left: 50%;
      }
    }
    &-left, &-right {
      .brick-popper-arrow {
        top: 50%;
      }
    }

    $double-popper-arrow-szie: popper.$popper-arrow-box-size * 2;
    &-top-start, &-bottom-start {
      .brick-popper-arrow {
        left: $double-popper-arrow-szie;
      }
    }
    &-top-end, &-bottom-end {
      .brick-popper-arrow {
        right: $double-popper-arrow-szie;
      }
    }
    &-left-start, &-right-start {
      .brick-popper-arrow {
        top: $double-popper-arrow-szie;
      }
    }
    &-left-end, &-right-end {
      .brick-popper-arrow {
        bottom: $double-popper-arrow-szie;
      }
    }
  }
}

@include popper.popper-distance(popper.$popper-distance, '.brick-popper');
@include popper.popper-distance(popper.$popper-with-arrow-distance, '.brick-popper-with-arrow');


body > .brick-popper .brick-popper-wrap {
  left: -100vh;
  top: -100vh;
}