// Tooltips v4.0.0
// Copyright 2023 zkreations (https://zkreations.com/)

@use "inc/mixin";
@use "inc/variables";


// Specificity to 0 to avoid conflict
:where([data-tts]) {
  position: relative;
  display: inline-block;

  &::before {
    content: attr(aria-label);
  }
}

// Tooltips
// Variables with the prefix "--tts" are safe to modify
// Variables with the prefix "--t" should not be modified

// Meaning of variables
// tt: transform (translate)
// tx: transform (translate X)
// ty: transform (translate Y)
// ts: transform (scale)
// to: transform origin
// p: position
// o: opacity

[data-tts] {
  &::before,
  &::after {
    @include mixin.tts-core;
  }

  // Initial state
  &:not(:hover, [data-tts-visible]) {
    --t-o: 0;
    --t-tt: var(--tts-start-translate, #{variables.$tts-start-translate});
    --t-ts: var(--tts-start-scale, #{variables.$tts-start-scale});
  }

  // Final state
  &:hover, &[data-tts-visible] {
    --t-tt: var(--tts-end-translate, #{variables.$tts-end-translate});
    --t-ts: var(--tts-end-scale, #{variables.$tts-end-scale});
  }

  // We subtract the position defined by the user
  // This ensures that the balloon will start and end where it should
  --t-p: calc(100% - var(--t-tt));

  // Background for both the indicator and the balloon
  --t-bg: var(--tts-background, rgb(0 0 0 / 90%));

  // Size of the indicator
  --t-arrow: var(--tts-arrow, #{variables.$tts-arrow-size});

  // Offset of the indicator
  --t-offset: var(--tts-arrow-offset, #{variables.$tts-arrow-offset});

  // Text styles
  &::before {
    @include mixin.tts-text;

    background-color: var(--t-bg);
  }

  // Indicator styles
  &::after {
    @include mixin.tts-arrow;

    border-width: var(--t-arrow);
  }
}

// Up (Default)
[data-tts*="up"],
[data-tts=""] {
  // Define the orientation (important)
  --t-it: 0;

  // Horizontal position
  --t-il: 50%;
  --t-tx: -50%;

  // Balloon
  &::before {
    // We subtract the size of the arrow and multiply to get a negative value
    --t-ty: calc((var(--t-p) + var(--t-arrow)) * -1);
  }

  // Indicator
  &::after {
    --t-to: top;
    --t-ty: calc(var(--t-p) * -1);

    border-top-color: var(--t-bg);
    border-bottom-width: 0;
  }
}

// Down
[data-tts*="down"] {
  // Define the orientation (important)
  --t-ib: 0;

  // Horizontal position
  --t-il: 50%;
  --t-tx: -50%;

  // Balloon
  &::before {
    --t-to: top;

    // We subtract the size of the arrow and multiply to get a negative value
    --t-ty: calc(var(--t-p) + var(--t-arrow));
  }

  // Indicator
  &::after {
    --t-to: bottom;
    --t-ty: var(--t-p);

    border-bottom-color: var(--t-bg);
    border-top-width: 0;
  }
}

// Left
[data-tts="left"] {
  // Define the orientation (important)
  --t-il: 0;

  // Vertical position
  --t-it: 50%;
  --t-ty: -50%;

  // Balloon
  &::before {
    --t-to: right;

    // We subtract the size of the arrow and multiply to get a negative value
    --t-tx: calc((var(--t-p) + var(--t-arrow)) * -1);
  }

  // Indicator
  &::after {
    --t-to: left;
    --t-tx: calc(var(--t-p) * -1);

    border-left-color: var(--t-bg);
    border-right-width: 0;
  }
}

// Right
[data-tts="right"] {
  // Define the orientation (important)
  --t-ir: 0;

  // Vertical position
  --t-it: 50%;
  --t-ty: -50%;

  // Balloon
  &::before {
    --t-to: left;

    // We subtract the size of the arrow and multiply to get a negative value
    --t-tx: calc(var(--t-p) + var(--t-arrow));
  }

  // Indicator
  &::after {
    --t-to: right;
    --t-tx: var(--t-p);

    border-right-color: var(--t-bg);
    border-left-width: 0;
  }
}


// Up-Left
[data-tts="up-left"],
[data-tts="down-left"] {
  --t-il: 0;
  --t-tx: 0;

  // Indicator
  &::after {
    --t-il: var(--t-offset);
  }
}

[data-tts="up-left"] {
  // Balloon
  &::before {
    --t-to: bottom left;
  }

  // Indicator
  &::after {
    --t-to: top left;
  }
}

// Down-left
[data-tts="down-left"] {
  // Balloon
  &::before {
    --t-to: top left;
  }

  // Indicator
  &::after {
    --t-to: bottom left;
  }
}

// Up-right
[data-tts="up-right"],
[data-tts="down-right"] {
  --t-il: auto;
  --t-ir: 0;
  --t-tx: 0;

  // Indicator
  &::after {
    --t-ir: var(--t-offset);
  }
}

[data-tts="up-right"] {
  // Balloon
  &::before {
    --t-to: bottom right;
  }

  // Indicator
  &::after {
    --t-to: top right;
  }
}

// Down-right
[data-tts="down-right"] {
  // Balloon
  &::before {
    --t-to: top right;
  }

  // Indicator
  &::after {
    --t-to: bottom right;
  }
}