@use 'sass:math';

@use '../variables' as *;

// Tooltip box -----------------------------------------------------------------
$lume-tooltip-background-color: $lume-color-white !default;
$lume-tooltip-border-radius: $lume-border-radius-8 !default;
$lume-tooltip-box-shadow: $lume-box-shadow !default;
$lume-tooltip-max-width: 288px !default;

$lume-tooltip-content-padding: $lume-spacing-8 $lume-spacing-12 !default;
$lume-tooltip-z-index: 500 !default;

$lume-tooltip-title-color: $lume-color-neutral-100 !default;

$lume-tooltip-item-color: $lume-color-neutral-100 !default;
$lume-tooltip-value-color: $lume-color-neutral-100 !default;

$lume-tooltip-item-min-width: 112px !default;
$lume-tooltip-symbol-size: $lume-spacing-8 !default;

.lume-tooltip {
  position: absolute;
  max-width: $lume-tooltip-max-width;
  padding: $lume-tooltip-content-padding;

  background: $lume-tooltip-background-color;
  border: $lume-border;
  border-radius: $lume-tooltip-border-radius;
  box-shadow: $lume-tooltip-box-shadow;
  z-index: $lume-tooltip-z-index;
  pointer-events: none; /* prevent jitter when tooltip gets in the way of the cursor during transitions */

  &--animated {
    transition: transform $lume-transition-time-long ease-out;
  }

  &--pointer-events {
    pointer-events: auto;
  }

  &__break {
    hr {
      margin-top: $lume-spacing-4;
      margin-bottom: $lume-spacing-4;
      border: 0;
      border-top: 1px solid $lume-color-neutral-40;
    }
  }

  &__title {
    margin-bottom: $lume-spacing-6;
    font-size: $lume-font-size-sm;
    line-height: $lume-line-height-sm;
    font-weight: $lume-font-weight-semi-bold;
    color: $lume-tooltip-title-color;
  }

  &__items {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &__item {
    display: flex;
    min-width: $lume-tooltip-item-min-width;
    margin-bottom: $lume-spacing-4;
    font-size: $lume-font-size-sm;
    line-height: $lume-line-height-sm;
    color: $lume-tooltip-item-color;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__symbol {
    margin-top: math.div(
      $lume-line-height-sm - $lume-tooltip-symbol-size,
      2
    ); // default: 3px
    margin-right: $lume-spacing-8;
    width: $lume-tooltip-symbol-size;
    height: $lume-tooltip-symbol-size;
    flex-shrink: 0;
    border-radius: 50%;
  }

  &__value {
    flex-shrink: 0;
    font-weight: $lume-font-weight-medium;
    margin-left: auto;
    padding-left: $lume-spacing-12;
    color: $lume-tooltip-value-color;
  }
}