@use "sass:color";
@use "./../variables" as *;

[data-tooltip] {
  position: relative;
  cursor: help;

  &::after,
  &::before {
    transition:
      opacity 0.2s ease-in-out,
      visibility 0.2s ease-in-out;
    transform: translate3d(0, 0, 0);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: var(--zindex-tooltip);
    color: var(--white);
    text-align: center;
    font-size: var(--font-size-small);
    line-height: normal;
    font-weight: 400;
  }

  &::before {
    content: "";
    border-top: 6px solid hsl(0deg 0% 0% / 75%);
    border-right: 6px solid transparent;
    border-bottom: 0 none;
    border-left: 6px solid transparent;
    inset: -6px auto auto 50%;
    margin: 0 0 0 -6px;
  }

  &::after {
    background-color: hsl(0deg 0% 0% / 75%);
    content: attr(data-tooltip);
    width: auto;
    min-width: calc(var(--spacer) * 6);
    padding: 4px 8px;
    border-radius: 3px;
    inset: auto auto 100% 50%;
    transform: translateY(-6px) translateX(-50%);
  }

  &.tooltip--large {
    &::after {
      min-width: calc(var(--spacer) * 16);
    }
  }

  &[data-placement="left"] {
    &::before {
      border-top: 6px solid transparent;
      border-right: 0 none;
      border-bottom: 6px solid transparent;
      border-left: 6px solid hsl(0deg 0% 0% / 75%);
      inset: 50% auto auto -6px;
      margin: -6px 0 0;
    }

    &::after {
      inset: 50% 100% auto auto;
      transform: translateY(-50%) translateX(-6px);
    }
  }

  &[data-placement="right"] {
    &::before {
      border-top: 6px solid transparent;
      border-right: 6px solid hsl(0deg 0% 0% / 75%);
      border-bottom: 6px solid transparent;
      border-left: 0 none;
      inset: 50% -6px auto auto;
      margin: -6px 0 0;
    }

    &::after {
      inset: 50% auto auto 100%;
      transform: translateY(-50%) translateX(6px);
    }
  }

  &[data-placement="bottom"] {
    &::before {
      border-top: 0 none;
      border-right: 6px solid transparent;
      border-bottom: 6px solid hsl(0deg 0% 0% / 75%);
      border-left: 6px solid transparent;
      inset: auto auto -6px 50%;
      margin: 0 0 0 -6px;
    }

    &::after {
      inset: 100% auto auto 50%;
      transform: translateY(6px) translateX(-50%);
    }
  }

  &:hover {
    &::after,
    &::before {
      visibility: visible;
      opacity: 1;
    }
  }
}