@use "pix-design-tokens/shadows";

.pix-tooltip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  &__trigger-element {
    display: block;
    width: 100%;
  }

  &__trigger-element:hover + .pix-tooltip__content {
    visibility: visible;
    opacity: 1;
  }
}

@supports selector(:has(*)) {
  .pix-tooltip--visible:has(.pix-tooltip__trigger-element :focus-visible) {
    .pix-tooltip__content {
      visibility: visible;
      opacity: 1;
    }
  }
}

@supports not selector(:has(*)) {
  .pix-tooltip--visible .pix-tooltip__trigger-element:focus-within + .pix-tooltip__content {
    visibility: visible;
    opacity: 1;
  }
}

.pix-tooltip__content {
  @extend %pix-shadow-md;

  position: absolute;
  left: auto;
  z-index: 100;
  padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
  color: var(--pix-neutral-0);
  font-size: 0.875rem;
  line-height: 1.4rem;
  background-color: var(--pix-neutral-900);
  border-radius: 6px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;

  &--inline {
    white-space: nowrap;
  }

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

  &--wide {
    width: 382px;
  }

  &--light {
    color: var(--pix-neutral-900);
    font-weight: var(--pix-font-medium);
    background-color: var(--pix-neutral-0);

    &::before {
      width: 8px;
      height: 8px;
      background-color: var(--pix-neutral-0);
      border-width: 0;
    }
  }
}

.pix-tooltip__content--right {
  left: calc(100% + 10px);

  &::before {
    top: calc(50% - 5px); // 50% is the height of the parent and 5px the height of the triangle
    left: -10px; // 10px is width of the ::before elmt
    border-color: transparent var(--pix-neutral-900) transparent transparent;
  }

  &.pix-tooltip__content--light::before {
    left: -4px;
    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
    transform: rotate(315deg);
  }
}

.pix-tooltip__content--top {
  bottom: calc(100% + 10px);
  left: 50%; // 50% here is the parent width
  transform: translate(-50%); // 50% here is the width of this current element

  &::before {
    top: 100%;
    left: calc(50% - 5px);
    border-color: var(--pix-neutral-900) transparent transparent transparent;
  }

  &.pix-tooltip__content--light::before {
    top: calc(100% - 5px);
    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
    transform: rotate(225deg);
  }
}

.pix-tooltip__content--top-left {
  bottom: calc(100% + 10px);
  transform: translate(calc(-50% + 22px));

  &::before {
    top: 100%;
    left: calc(100% - 27px);
    border-color: var(--pix-neutral-900) transparent transparent transparent;
  }

  &.pix-tooltip__content--light::before {
    top: calc(100% - 5px);
    left: calc(100% - 26px);
    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
    transform: rotate(225deg);
  }
}

.pix-tooltip__content--top-right {
  bottom: calc(100% + 10px);
  transform: translate(calc(50% - 22px));

  &::before {
    top: 100%;
    border-color: var(--pix-neutral-900) transparent transparent transparent;
  }

  &.pix-tooltip__content--light::before {
    top: calc(100% - 5px);
    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
    transform: rotate(225deg);
  }
}

.pix-tooltip__content--bottom {
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%);

  &::before {
    top: -10px;
    left: calc(50% - 5px);
    border-color: transparent transparent var(--pix-neutral-900) transparent;
  }

  &.pix-tooltip__content--light::before {
    top: -4px;
    border-color: var(--pix-neutral-500) transparent transparent var(--pix-neutral-500);
    transform: rotate(45deg);
  }
}

.pix-tooltip__content--bottom-left {
  top: calc(100% + 10px);
  transform: translate(calc(-50% + 22px));

  &::before {
    top: -10px;
    left: calc(100% - 27px);
    border-color: transparent transparent var(--pix-neutral-900) transparent;
  }

  &.pix-tooltip__content--light::before {
    top: -4px;
    left: calc(100% - 26px);
    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
    transform: rotate(45deg);
  }
}

.pix-tooltip__content--bottom-right {
  top: calc(100% + 10px);
  transform: translate(calc(50% - 22px));

  &::before {
    top: -10px;
    border-color: transparent transparent var(--pix-neutral-900) transparent;
  }

  &.pix-tooltip__content--light::before {
    top: -4px;
    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
    transform: rotate(45deg);
  }
}

.pix-tooltip__content--left {
  right: calc(100% + 10px);

  &::before {
    top: calc(50% - 5px);
    right: -10px;
    border-color: transparent transparent transparent var(--pix-neutral-900);
  }

  &.pix-tooltip__content--light::before {
    right: -4px;
    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
    transform: rotate(135deg);
  }
}