@use 'sass:map';
@use '../core/variables' as *;
@use '../functions' as *;

.tooltip {
  display: none;
  text-wrap: nowrap;
  color: $white;
  font-size: var(--#{$prefix}font-size-xxs);
  font-weight: bold;

  &-container {
    position: relative;
    display: inline-block;
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1000;
    height: 0;
    width: 0;
    right: calc(50% - 5px);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }

  > span {
    position: absolute;
    z-index: 1000;
    background-color: var(--#{$prefix}basic-black);
    padding: 6px 12px;
    border-radius: 4px;
    box-shadow: var(--#{$prefix}shadow-low-elevation) HEXToRGBA($black, 0.2);
  }

  &.top {
    &::before {
      bottom: calc(100% + 5px);
      border-top: 5px solid var(--#{$prefix}basic-black);
    }

    > span {
      bottom: calc(100% + 10px);
    }

    &.right > span {
      left: 0;
    }

    &.left > span {
      right: 0;
    }
  }

  &.bottom {
    &::before {
      top: calc(100% + 5px);
      border-bottom: 5px solid var(--#{$prefix}basic-black);
    }

    > span {
      top: calc(100% + 10px);
    }

    &.right > span {
      left: 0;
    }

    &.left > span {
      right: 0;
    }
  }
}