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

.#{$prefix}-tooltip {
  font-size: var(--ty-tooltip-font-size);
  color: var(--ty-tooltip-color);

  &__inner {
    padding: var(--ty-tooltip-content-padding);
  }

  .#{$prefix}-popup {
    &__arrow, &__arrow::before {
      width: var(--ty-tooltip-arrow-size);
      height: var(--ty-tooltip-arrow-size);
    }
  }

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

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

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

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