@import 'themes/default';

.LegacyTooltip-Container {
  outline: none;
  position: relative;

  &:hover {
    .LegacyTooltip--visible-hover {
      opacity: 1;
      visibility: visible;
    }
  }
}

.LegacyTooltip {
  display: block;
  opacity: 0;
  position: absolute;
  transition-property: visibility, opacity;
  transition-duration: 0.3s, 0.3s;
  visibility: hidden;
  z-index: 1;

  &:after {
    content: '';
    height: 0;
    position: absolute;
    width: 0;
  }

  &--visible {
    opacity: 1;
    visibility: visible;
  }

  &--fixed-position {
    position: fixed;
  }
}

.LegacyTooltip__Content {
  background-color: var(--color--main);
  border-radius: var(--radius--small);
  color: var(--color--invert);
  display: block;

  &--invert {
    background-color: var(--color--invert);
    color: var(--color--main);
  }
}

// === Placement === //

.LegacyTooltip--bottom {
  left: 50%;
  padding-top: 0.75em;
  top: 100%;
  transform: translateX(-50%);

  &.LegacyTooltip--invert:after {
    border-bottom-color: var(--color--invert);
  }

  &:after {
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.5em solid var(--color--main);
    bottom: calc(100% - 0.75em);
    left: 50%;
    transform: translateX(-50%);
  }
}

.LegacyTooltip--left {
  right: 100%;
  padding-right: 0.75em;
  top: 50%;
  transform: translateY(-50%);

  &.LegacyTooltip--invert:after {
    border-left-color: var(--color--invert);
  }

  &:after {
    border-bottom: 0.5em solid transparent;
    border-left: 0.5em solid var(--color--main);
    border-top: 0.5em solid transparent;
    left: calc(100% - 0.75em);
    top: 50%;
    transform: translateY(-50%);
  }
}

.LegacyTooltip--right {
  left: 100%;
  padding-left: 0.75em;
  top: 50%;
  transform: translateY(-50%);

  &.LegacyTooltip--invert:after {
    border-right-color: var(--color--invert);
  }

  &:after {
    border-bottom: 0.5em solid transparent;
    border-right: 0.5em solid var(--color--main);
    border-top: 0.5em solid transparent;
    top: 50%;
    right: calc(100% - 0.75em);
    transform: translateY(-50%);
  }
}

.LegacyTooltip--top {
  bottom: 100%;
  left: 50%;
  padding-bottom: 0.75em;
  transform: translateX(-50%);

  &.LegacyTooltip--invert:after {
    border-top-color: var(--color--invert);
  }

  &:after {
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid var(--color--main);
    left: 50%;
    top: calc(100% - 0.75em);
    transform: translateX(-50%);
  }
}