@use 'sass:math';
@use '../abstract/_all';
@use '../abstract/setup';

$tooltip-arrow: 10px;
$tooltip-border-color: setup.$c-middle-grey;
$tooltip-dist: 10px;
setup.$tooltip-padding: 8px;
$tooltip-width: 320px;

.tooltip-sm {
  bottom: 0;
  transform: translateY(100%) translateY($tooltip-arrow);
  right: calc(50% - 16px);
  background-color: setup.$c-white;
  border: 1px solid $tooltip-border-color;
  position: absolute;
  width: max-content;
  max-width: $tooltip-width;
  z-index: 10;
  padding: setup.$tooltip-padding;
  padding-right: setup.$tooltip-padding + 16px;
  color: setup.$c-primary;

  &::after {
    content: '';
    top: math.div(-$tooltip-arrow, 2) - 1;
    right: $tooltip-dist;
    position: absolute;
    border-top: 1px solid $tooltip-border-color;
    border-left: 1px solid $tooltip-border-color;
    width: $tooltip-arrow;
    height: $tooltip-arrow;
    background: setup.$c-white;
    transform: rotate(45deg);
  }

  &.tooltip-br,
  &.tooltip-tr {
    left: calc(50% - 16px);
    right: auto;
    &::after {
      right: auto;
      left: $tooltip-dist;
    }
  }

  &.tooltip-tl,
  &.tooltip-tr {
    top: 0;
    bottom: auto;
    transform: translateY(-100%) translateY(-$tooltip-arrow);
    &::after {
      top: auto;
      bottom: math.div(-$tooltip-arrow, 2) - 1;
      transform: rotate(225deg);
    }
  }

  .close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}

.store-state {
  width: max-content;
  position: relative;
  padding-left: 16px;

  div {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    top: 3px;
    left: 0;
    width: 8px;
    height: 8px;
  }
}

.has-tooltip-temp {
  position: relative;
  width: fit-content;
  height: fit-content;
}

.tooltip-sm-temp {
  bottom: 0;
  transform: translateY(100%) translateY($tooltip-arrow);
  right: -8px;
  background-color: setup.$c-white;
  border: 1px solid $tooltip-border-color;
  position: absolute;
  width: 240px;
  z-index: 10;
  padding: setup.$tooltip-padding;
  padding-right: setup.$tooltip-padding + 16px;
  color: setup.$c-primary;

  &::after {
    content: '';
    top: math.div(-$tooltip-arrow, 2) - 1;
    right: $tooltip-dist;
    position: absolute;
    border-top: 1px solid $tooltip-border-color;
    border-left: 1px solid $tooltip-border-color;
    width: $tooltip-arrow;
    height: $tooltip-arrow;
    background: setup.$c-white;
    transform: rotate(45deg);
  }

  .close-temp {
    position: absolute;
    right: 8px;
    top: 8px;
  }

  &.tooltip-tl-temp {
    left: -8px;
    right: auto;
    &::after {
      right: auto;
      left: $tooltip-dist;
    }
  }
  &.tooltip-bl-temp {
    top: 0;
    bottom: auto;
    transform: translateY(-100%) translateY(-$tooltip-arrow);
  }
}

.tooltip-sm-old {
  top: 36px;
  right: 8px;
  background-color: setup.$c-white;
  border: 1px solid setup.$c-middle-grey;
  position: absolute;
  width: 100%;
  max-width: 327px;
  z-index: 10;
}

.tooltip-sm-old::after {
  top: -6px;
  right: 18px;
  content: '';
  position: absolute;
  border-top: 1px solid setup.$c-middle-grey;
  border-left: 1px solid setup.$c-middle-grey;
  width: 10px;
  height: 10px;
  background: setup.$c-white;
  transform: rotate(45deg);
}

.tooltip-close {
  border-bottom: 1px solid setup.$c-middle-grey;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px;
}

.is-tooltip {
  position: relative;
  width: 100%;
}

.has-tooltip {
  position: relative;
  width: fit-content;
}