@use "../../styles/utils";
@use "./variables" as locals;

@mixin reveal() {
  .content {
    opacity: 1;
    visibility: visible;
  }
}

@include utils.layer {
  .target {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;

    &:hover {
      @include reveal();
    }

    // TODO: extract this pattern as a mixin
    @supports selector(:has(:focus-visible)) {
      &:has(:focus-visible) {
        @include reveal();
      }
    }

    @supports not selector(:has(:focus-visible)) {
      &:focus-within {
        @include reveal();
      }
    }
  }

  .content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    font-size: var(--cmm-font-size-xs);
    font-weight: var(--cmm-font-weight-normal);
    line-height: 1;
    background: var(--cmm-Tooltip-bg);
    color: var(--cmm-Tooltip-font);
    border: 1px solid var(--cmm-Tooltip-border);
    border-radius: var(--cmm-radius-md);
    transition: 0.2s ease-in;
    transition-delay: 0.15s;
    display: inline-block;
    padding: 0.5rem;

    &::before {
      content: "";
      position: absolute;
      border: locals.$arrowSize solid transparent;
    }

    &[data-placement="top"] {
      left: 50%;
      translate: -50% calc((locals.$offset + locals.$arrowSize) * -1);
      bottom: 100%;

      &:before {
        bottom: calc(locals.$arrowSize * 2 * -1 + 1px);
        left: 50%;
        translate: calc(locals.$arrowSize * -1);
        border-top: locals.$arrowSize solid var(--cmm-Tooltip-bg);
      }
    }

    &[data-placement="right"] {
      translate: calc(locals.$offset + locals.$arrowSize) -50%;
      top: 50%;
      left: 100%;

      &:before {
        top: 50%;
        left: calc(locals.$arrowSize * 2 * -1 + 1px);
        translate: 0 -50%;
        border-right: locals.$arrowSize solid var(--cmm-Tooltip-bg);
      }
    }

    &[data-placement="bottom"] {
      left: 50%;
      translate: -50% calc(locals.$offset + locals.$arrowSize);
      top: 100%;

      &:before {
        top: calc(locals.$arrowSize * 2 * -1 + 1px);
        left: 50%;
        translate: calc(locals.$arrowSize * -1);
        border-bottom: locals.$arrowSize solid var(--cmm-Tooltip-bg);
      }
    }

    &[data-placement="left"] {
      translate: calc((locals.$offset + locals.$arrowSize) * -1) -50%;
      top: 50%;
      right: 100%;

      &:before {
        top: 50%;
        right: calc(locals.$arrowSize * 2 * -1 + 1px);
        translate: 0 -50%;
        border-left: locals.$arrowSize solid var(--cmm-Tooltip-bg);
      }
    }
  }
}
