@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Tooltip';

$tooltipBaseClass: '#{constants.$prefix}tooltip';
$arrow-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="4" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 3.515c.69.647 1.81.647 2.5 0L10 0H0l3.75 3.515Z" fill="%23202E39"/></svg>');

$sizes: (
  xs: tokens.$bm-comp-tooltip-size-icon-trigger-xs,
  sm: tokens.$bm-comp-tooltip-size-icon-trigger-sm,
  md: tokens.$bm-comp-tooltip-size-icon-trigger-md,
  lg: tokens.$bm-comp-tooltip-size-icon-trigger-lg,
  xl: tokens.$bm-comp-tooltip-size-icon-trigger-xl,
);

%icon-trigger-base {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  display: flex;
  cursor: pointer;
  color: tokens.$bm-comp-tooltip-color-icon-trigger;
}

.#{$tooltipBaseClass} {
  z-index: 999;

  background-color: tokens.$bm-comp-tooltip-color-bg;
  border-radius: tokens.$bm-comp-tooltip-radius;

  max-width: tokens.$bm-comp-tooltip-size-width;
  padding: tokens.$bm-comp-tooltip-space-y tokens.$bm-comp-tooltip-space-x;

  color: tokens.$bm-comp-tooltip-color-text;
  font: tokens.$bm-comp-tooltip-typo-body;

  // doesn't actually directly do anything in CSS;
  // just a sanity check so we don't ever lose this var in prod
  // due to a plugin like purgeCSS
  offset: tokens.$bm-comp-tooltip-space-offset;

  // animation styling
  // see https://floating-ui.com/docs/useTransition#usetransitionstatus
  transition-property: opacity;

  &[data-status='open'] {
    transition-duration: 0s;
  }

  &[data-status='close'] {
    transition-duration: 0.2s;
  }

  &[data-status='initial'],
  &[data-status='close'] {
    opacity: 0;
  }

  &__arrow {
    // doesn't actually directly do anything in CSS;
    // just a sanity check so we don't ever lose this var in prod
    // due to a plugin like purgeCSS
    offset: tokens.$bm-comp-tooltip-space-arrow;

    @include mixins.svg-icon($arrow-mask);

    // slight scale to prevent gaps
    scale: 1.05;

    width: tokens.$bm-comp-tooltip-size-arrow-width;
    height: tokens.$bm-comp-tooltip-size-arrow-height;
    background-color: tokens.$bm-comp-tooltip-color-bg;
  }

  &__icon-trigger {
    @extend %icon-trigger-base;

    svg {
      background: none;
      border: none;
    }

    &:focus-visible {
      border-radius: tokens.$bm-sem-radius-round;
      @include mixins.simulated-inset-outline($offset: 0px);
    }

    &--disabled {
      opacity: tokens.$bm-sem-opacity-disabled;
      cursor: inherit;
    }

    @each $size, $sizeValue in $sizes {
      &--#{$size} {
        border-radius: 100%;

        // This ensures it works with the slot
        height: $sizeValue;
        width: $sizeValue;

        svg {
          height: $sizeValue;
          width: $sizeValue;
        }
      }
    }
  }
}