@use '../theme/popover.tokens' as popover;
@use '../theme/shadows.tokens' as shadows;
@use '../theme/spacing.tokens' as spacing;
@use '../theme/transitions.tokens' as transitions;

.pa-popup.pa-popover {
  box-shadow: none;
  filter: drop-shadow(shadows.$drop-shadow-medium);
  opacity: 0;
  transition: opacity transitions.$transition-response;

  &.pa-visible {
    opacity: 1;
  }

  .pa-popup-wrapper {
    background: popover.$color-background-popover;
    border-radius: spacing.$border-radius-default;
    color: popover.$color-text-popover;
    max-width: spacing.rhythm(32);
    min-width: spacing.rhythm(20);
  }

  &:before {
    border-style: solid;
    content: '';
    position: absolute;
  }

  &.arrow-top {
    .pa-popup-wrapper {
      margin-top: popover.$size-arrow-popover;
    }
    &:before {
      border-width: 0 popover.$size-arrow-popover popover.$size-arrow-popover popover.$size-arrow-popover;
      border-color: transparent transparent popover.$color-background-popover transparent;
      left: 50%;
      top: 1px;
      transform: translateX(-50%);
    }
  }

  &.arrow-right {
    .pa-popup-wrapper {
      margin-right: popover.$size-arrow-popover;
    }
    &:before {
      border-width: popover.$size-arrow-popover 0 popover.$size-arrow-popover popover.$size-arrow-popover;
      border-color: transparent transparent transparent popover.$color-background-popover;
      right: 1px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &.arrow-left {
    .pa-popup-wrapper {
      margin-left: popover.$size-arrow-popover;
    }
    &:before {
      border-width: popover.$size-arrow-popover popover.$size-arrow-popover popover.$size-arrow-popover 0;
      border-color: transparent popover.$color-background-popover transparent transparent;
      left: 1px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}