@import '../../../scss/styles.scss';

.tooltip {
  --caret-size: 6px;

  opacity: 0;
  background-color: var(--theme-elevation-800);
  position: absolute;
  z-index: 2;
  left: 50%;
  padding: base(0.2) base(0.4);
  color: var(--theme-elevation-0);
  line-height: base(0.75);
  font-weight: normal;
  white-space: nowrap;
  border-radius: 2px;
  visibility: hidden;

  &::after {
    content: ' ';
    display: block;
    position: absolute;
    transform: translate3d(-50%, 100%, 0);
    width: 0;
    height: 0;
    border-left: var(--caret-size) solid transparent;
    border-right: var(--caret-size) solid transparent;
  }

  &--show {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    cursor: default;
  }

  &--caret-center {
    &::after {
      left: 50%;
    }
  }

  &--caret-left {
    &::after {
      left: calc(var(--base) * 0.5);
    }
  }

  &--caret-right {
    &::after {
      right: calc(var(--base) * 0.5);
    }
  }

  &--position-top {
    bottom: 100%;
    transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);

    &::after {
      bottom: 1px;
      border-top: var(--caret-size) solid var(--theme-elevation-800);
    }
  }

  &--position-bottom {
    top: 100%;
    transform: translate3d(-50%, var(--caret-size), 0);

    &::after {
      bottom: calc(100% + var(--caret-size) - 1px);
      border-bottom: var(--caret-size) solid var(--theme-elevation-800);
    }
  }

  .tooltip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  @include mid-break {
    display: none;
  }
}

html[data-theme='light'] {
  .tooltip {
    background-color: var(--theme-error-250);
    color: var(--theme-error-750);

    &--position-top:after {
      border-top-color: var(--theme-error-250);
    }

    &--position-bottom:after {
      border-bottom-color: var(--theme-error-250);
    }
  }
}