@use 'sass:math';
@use '../variables' as variables;
@use '../functions' as functions;

.tooltip {
  --tooltip-bg: #{variables.$tooltip-bg};
  --tooltip-border-radius: #{variables.$tooltip-border-radius};
  --tooltip-color: #{functions.color-contrast(variables.$tooltip-bg)};
  --tooltip-font-family: #{variables.$tooltip-font-family};
  --tooltip-padding: #{variables.$tooltip-padding};
  --tooltip-size: #{variables.$tooltip-size};

  background-color: var(--tooltip-bg);
  border-radius: var(--tooltip-border-radius);
  color: var(--tooltip-color);
  font-family: var(--tooltip-font-family);
  padding: var(--tooltip-padding);
  visibility: hidden;
  width: max-content;
  z-index: variables.$zindex-tooltip;

  [data-popper-arrow] {
    text-align: initial;

    &,
    &::before {
      height: var(--tooltip-size);
      position: absolute;
      width: var(--tooltip-size);
    }

    &::before {
      background-color: var(--tooltip-bg);
      content: '';
      transform: rotate(45deg);
      transform-origin: center center;
    }
  }

  &[data-popper-placement*='top'] [data-popper-arrow] {
    margin-bottom: calc(var(--tooltip-size) / -2);
    bottom: 0;
  }

  &[data-popper-placement*='right'] [data-popper-arrow] {
    margin-left: calc(var(--tooltip-size) / -2);
    left: 0;
  }

  &[data-popper-placement*='bottom'] [data-popper-arrow] {
    margin-top: calc(var(--tooltip-size) / -2);
    top: 0;
  }

  &[data-popper-placement*='left'] [data-popper-arrow] {
    margin-right: calc(var(--tooltip-size) / -2);
    right: 0;
  }
}