/* Tooltip: [data-tooltip] with [data-placement] */

[data-tooltip] {
  position: relative;

  &:not(a, button, input, [role="button"]) {
    text-decoration: underline dashed var(--pico-muted-color);
    text-underline-offset: var(--pico-text-underline-offset);
    cursor: help;
  }

  /* Bubble (::before) and caret (::after), default placement is top */
  &[data-placement="top"]::before,
  &[data-placement="top"]::after,
  &::before,
  &::after {
    display: block;
    z-index: 99;
    position: absolute;
    bottom: 100%;
    left: 50%;
    padding: 0.375rem 0.625rem;
    overflow: hidden;
    transform: translate(-50%, -0.25rem);
    border-radius: calc(var(--pico-border-radius) * 0.75);
    background: var(--pico-tooltip-background-color);
    box-shadow: var(--pico-dropdown-box-shadow);
    content: attr(data-tooltip);
    color: var(--pico-tooltip-color);
    font-style: normal;
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: var(--pico-line-height);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }

  /* The caret is a border triangle drawn in currentColor */
  &[data-placement="top"]::after,
  &::after {
    padding: 0;
    transform: translate(-50%, 0rem);
    border-top: 0.3rem solid;
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    content: "";
    color: var(--pico-tooltip-background-color);
  }

  &[data-placement="bottom"] {
    &::before,
    &::after {
      top: 100%;
      bottom: auto;
      transform: translate(-50%, 0.25rem);
    }

    &::after {
      transform: translate(-50%, -0.3rem);
      border: 0.3rem solid transparent;
      border-bottom: 0.3rem solid;
    }
  }

  &[data-placement="left"] {
    &::before,
    &::after {
      top: 50%;
      right: 100%;
      bottom: auto;
      left: auto;
      transform: translate(-0.25rem, -50%);
    }

    &::after {
      transform: translate(0.3rem, -50%);
      border: 0.3rem solid transparent;
      border-left: 0.3rem solid;
    }
  }

  &[data-placement="right"] {
    &::before,
    &::after {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 100%;
      transform: translate(0.25rem, -50%);
    }

    &::after {
      transform: translate(-0.3rem, -50%);
      border: 0.3rem solid transparent;
      border-right: 0.3rem solid;
    }
  }

  &:focus::before,
  &:focus::after,
  &:hover::before,
  &:hover::after {
    opacity: 1;
  }
}

/* Slide in only where there is a real hover, touch just shows the bubble */
@media (hover: hover) and (pointer: fine) {
  [data-tooltip] {
    &:focus::before,
    &:focus::after,
    &:hover::before,
    &:hover::after {
      --pico-tooltip-slide-to: translate(-50%, -0.25rem);
      transform: translate(-50%, 0.75rem);
      animation-duration: 0.2s;
      animation-fill-mode: forwards;
      animation-name: tooltip-slide;
      opacity: 0;
    }

    &:focus::after,
    &:hover::after {
      --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
      transform: translate(-50%, -0.25rem);
      animation-name: tooltip-caret-slide;
    }

    &[data-placement="bottom"] {
      &:focus::before,
      &:focus::after,
      &:hover::before,
      &:hover::after {
        --pico-tooltip-slide-to: translate(-50%, 0.25rem);
        transform: translate(-50%, -0.75rem);
        animation-name: tooltip-slide;
      }

      &:focus::after,
      &:hover::after {
        --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
        transform: translate(-50%, -0.5rem);
        animation-name: tooltip-caret-slide;
      }
    }

    &[data-placement="left"] {
      &:focus::before,
      &:focus::after,
      &:hover::before,
      &:hover::after {
        --pico-tooltip-slide-to: translate(-0.25rem, -50%);
        transform: translate(0.75rem, -50%);
        animation-name: tooltip-slide;
      }

      &:focus::after,
      &:hover::after {
        --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
        transform: translate(0.05rem, -50%);
        animation-name: tooltip-caret-slide;
      }
    }

    &[data-placement="right"] {
      &:focus::before,
      &:focus::after,
      &:hover::before,
      &:hover::after {
        --pico-tooltip-slide-to: translate(0.25rem, -50%);
        transform: translate(-0.75rem, -50%);
        animation-name: tooltip-slide;
      }

      &:focus::after,
      &:hover::after {
        --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
        transform: translate(-0.05rem, -50%);
        animation-name: tooltip-caret-slide;
      }
    }
  }
}

@keyframes tooltip-slide {
  to {
    transform: var(--pico-tooltip-slide-to);
    opacity: 1;
  }
}

@keyframes tooltip-caret-slide {
  50% {
    opacity: 0;
  }

  to {
    transform: var(--pico-tooltip-caret-slide-to);
    opacity: 1;
  }
}