@use "../../style/variables" as *;

.#{$prefix}-popup {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--ty-popup-radius, var(--ty-border-radius));
  white-space: nowrap;
  font-size: var(--ty-popup-font-size, var(--ty-font-size-base));
  text-align: left;
  box-shadow: var(--ty-popup-shadow, var(--ty-shadow-popup));
  z-index: var(--ty-popup-z-index, 999);

  &__arrow, &__arrow::before {
    width: var(--ty-popover-arrow-size);
    height: var(--ty-popover-arrow-size);
    box-sizing: border-box;
    position: absolute;
  }

  &__arrow::before {
    content: '';
    transform: rotate(45deg);
  }

  &_light {
    background-color: var(--ty-popup-light-bg, var(--ty-color-bg-container));
    color: var(--ty-popup-color-light, var(--ty-color-text-secondary));
    .#{$prefix}-popup {
      &__arrow::before {
        background: var(--ty-popup-light-bg, var(--ty-color-bg-container));
      }
    }
  }

  &_dark {
    background-color: var(--ty-popup-dark-bg, #262626);
    color: var(--ty-popup-color-dark, #fff);
    .#{$prefix}-popup {
      &__arrow::before {
        background: var(--ty-popup-dark-bg, #262626);
      }
    }
  }

  &[data-popper-placement^='top'] {
    & > .#{$prefix}-popup__arrow {
      bottom: calc(var(--ty-popover-arrow-size) / -2);

      &::before {
        box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
      }
    }
  }

  &[data-popper-placement^='bottom'] {
    > .#{$prefix}-popup__arrow {
      top: calc(var(--ty-popover-arrow-size) / -2);

      &::before {
        box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
      }
    }
  }

  &[data-popper-placement^='left'] {
    > .#{$prefix}-popup__arrow {
      right: calc(var(--ty-popover-arrow-size) / -2);

      &::before {
        box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
      }
    }
  }

  &[data-popper-placement^='right'] {
    > .#{$prefix}-popup__arrow {
      left: calc(var(--ty-popover-arrow-size) / -2);

      &::before {
        box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow, rgb(0 0 0 / 7%));
      }
    }
  }
}