@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(.2) base(.4);
	color: var(--theme-elevation-0);
	line-height: base(.75);
	font-weight: normal;
	white-space: nowrap;
	border-radius: 2px;
  visibility: hidden;

  &::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 50%;
    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 .2s ease-in-out;
    cursor: default;
  }

  &--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);
    }
  }

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