@use '../../helpers';
@use '../../mixins';

@mixin Popover() {
  @if not mixins.includes('Popover') {
    @include _Popover();
  }
}

@mixin _Popover() {
  .ods-popover-anchor {
    position: absolute;
    visibility: hidden;
    z-index: 9999999;

    &.-overlay {
      /* stylelint-disable-next-line max-nesting-depth */
      &::before {
        $inset: 0;

        background-color: helpers.color('background-overlay');
        bottom: $inset;
        content: '';
        display: block;
        left: $inset;
        position: fixed;
        right: $inset;
        top: $inset;
        visibility: visible;
      }

      /* stylelint-disable-next-line max-nesting-depth */
      .ods-popover {
        bottom: initial;
        height: fit-content;
        left: 50%;
        max-height: 75%;
        max-width: 75%;
        position: fixed;
        right: initial;
        top: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
      }
    }
  }

  .ods-popover {
    height: fit-content;
    overscroll-behavior: contain;
    position: absolute;
    visibility: initial;
    width: max-content;

    // position ==========>
    &:where(.-top--center, .-top--start, .-top--end) {
      @include _position(bottom);
    }

    &:where(.-bottom--center, .-bottom--start, .-bottom--end) {
      @include _position(top);
    }

    &:where(.-left--center, .-left--start, .-left--end) {
      @include _position(right);
    }

    &:where(.-right--center, .-right--start, .-right--end) {
      @include _position(left);
    }
    // <========== position

    // alignment ==========>
    &:where(.-top--center, .-bottom--center) {
      @include _center(X);
    }

    &:where(.-left--center, .-right--center) {
      @include _center(Y);
    }

    &:where(.-top--start, .-bottom--start) {
      left: 0;
    }

    &:where(.-left--start, .-right--start) {
      top: 0;
    }

    &:where(.-top--end, .-bottom--end) {
      right: 0;
    }

    &:where(.-left--end, .-right--end) {
      bottom: 0;
    }
    // <========== alignment
  }
}

@mixin _position($side) {
  #{$side}: 100%;
  margin-#{$side}: var(--popover-gap, helpers.space(0.125));
}

@mixin _center($axis) {
  $side: if($axis == X, left, top);

  #{$side}: 50%;
  transform: translate#{$axis }(-50%);
}