@use "variables";
@use "sass:string";

@function prop($name, $fallback, $customizable: true) {
  @if $customizable {
    @return var(#{$name}, #{$fallback});
  }

  @return $fallback;
}

@mixin bubble($customizable: true) {
  box-sizing: border-box;
  max-width: prop('--tt-max-width', variables.$max-width, $customizable);
  padding: prop('--tt-padding', variables.$padding, $customizable);
  border-radius: prop('--tt-radius', variables.$radius, $customizable);
  background-color: prop('--tt-bg', variables.$background, $customizable);
  color: prop('--tt-color', variables.$color, $customizable);
  font-size: prop('--tt-size', variables.$size, $customizable);
  font-weight: normal;
  line-height: variables.$line-height;
  pointer-events: none;
  user-select: none;
  z-index: prop('--tt-z-index', 10, $customizable);
  transition-duration: prop('--tt-duration', variables.$duration, $customizable);
  transition-timing-function: prop('--tt-ease', ease, $customizable);

  @if $customizable or variables.$shadow != none {
    box-shadow: prop('--tt-shadow', variables.$shadow, $customizable);
  }

  @if $customizable {
    transition-property: opacity, transform;
    opacity: var(--_o, 0);
    transform: var(--_t, none);
  } @else {
    transition-property: opacity;
    opacity: 0;
  }
}

@mixin fallback($customizable: true) {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + #{prop('--tt-gap', variables.$gap, $customizable)});
  left: 50%;
  translate: -50%;
  transform-origin: center bottom;

  @include bubble($customizable);
}

@mixin anchor($customizable: true) {
  position: fixed;
  position-anchor: auto;
  position-try-fallbacks: prop('--tt-fallbacks', (flip-block, flip-inline), $customizable);

  @if $customizable {
    --_a: #{prop('--tt-area', block-start, $customizable)};

    position-area: var(--_a);
    margin: prop('--tt-gap', variables.$gap, $customizable);
    margin-block: string.unquote("if(style(--_a: inline-start): 0; style(--_a: inline-end): 0; else: #{prop('--tt-gap', variables.$gap, $customizable)})");
    margin-inline: string.unquote("if(style(--_a: block-start): 0; style(--_a: block-end): 0; else: #{prop('--tt-gap', variables.$gap, $customizable)})");
  } @else {
    position-area: block-start;
    margin-block: variables.$gap;
  }

  inset: auto;
  justify-self: anchor-center;
  translate: none;
  transform-origin: center;
}