@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Popover';

$popoverBaseClass: '#{constants.$prefix}popover';

$ARROW: url("data:image/svg+xml,%3Csvg width='21.544' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.122 7.93 0 0h21.544l-8.121 7.93c-1.462 1.427-3.84 1.427-5.301 0z' fill='%23fff' style='fill:%231a1a1a;stroke:none'/%3E%3C/svg%3E");

.#{$popoverBaseClass} {
  background-color: tokens.$bm-comp-popover-color-bg !important;
  border: tokens.$bm-comp-popover-border-width solid
    tokens.$bm-comp-popover-color-border;
  border-radius: tokens.$bm-comp-popover-radius;
  box-shadow: tokens.$bm-comp-popover-shadow;

  // to prevent this token from being purged
  offset: tokens.$bm-comp-popover-space-offset;

  // override default Popover API styles
  width: unset;

  &:focus-visible {
    outline: none;
  }

  padding: tokens.$bm-sem-space-100;

  // SVG cannot be styled with tokens (unless we inline it in React, but then
  // we would need to do css lookups, which isn't ideal)
  // so instead, we use two pseudo-elements to create the arrow
  // ::before acts as the border (stacked behind), ::after acts as the main arrow
  &__arrow {
    $OFFSET: 0.05rem;
    width: tokens.$bm-comp-popover-size-beak-width;
    height: tokens.$bm-comp-popover-size-beak-height;

    &::after {
      position: absolute;
      content: '';
      // raise arrow positioning (default arrow position is on the bottom of the popover content, pointing down)
      // as bugs in some browser/zoom configurations causes the ::before psuedo-element to peek through
      // the top of the arrow
      top: -#{$OFFSET};
      @include mixins.svg-icon($ARROW);
      width: 100%;
      height: 100%;
      background-color: tokens.$bm-comp-popover-color-bg !important;
    }

    &::before {
      position: absolute;
      content: '';
      right: 50%;
      transform: translateX(50%);
      @include mixins.svg-icon($ARROW);
      background-color: tokens.$bm-comp-popover-color-border;

      // increase the height of the arrow to cover the border. however, we've also moved the arrow (::after) up by $OFFSET
      // (see comment above for reasoning) so a bit of ::before is already poking out.
      // therefore we need to subtract that from the height
      height: calc(
        #{tokens.$bm-comp-popover-size-beak-height} + #{tokens.$bm-comp-popover-border-width} -
          #{$OFFSET}
      );
      // height and width of the svg; see the $ARROW declaration above
      aspect-ratio: 17.954 / 7.5;
    }
  }
}