// ============================================================================
// :: Tooltip
// ============================================================================
/**
 * The tooltip component toggles a small part of content hidden behind an
 * icon.
 */

// ============================================================================
// :: Settings
// ============================================================================
$arrow-size: 1.4rem;

// ============================================================================
// :: Root
// ============================================================================
.m-tooltip {
  position: relative;

  display: inline-block;
}

// ============================================================================
// :: Elements - icon
// ============================================================================
.m-tooltip__icon {
  display: inline-block;
  padding: 0;

  line-height: 1;
  font-size: 2.4rem;
  text-decoration: none;

  color: $text-color-1x-light;
  background-color: transparent;
  border: 0;
  appearance: none;

  transition: color 0.2s ease-in-out;

  cursor: pointer;

  &:focus {
    outline: 0.2rem solid $primary-color-base;
    outline-offset: 0.2rem;
  }
}

// ============================================================================
// :: Elements - content
// ============================================================================
.m-tooltip__content {
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 50%;
  transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px)))
    translateY(var(--tooltip-offset-y, 0px));

  width: 18rem;
  max-width: calc(100vw - 1rem);
  padding: 1rem 2rem;

  font-size: $font-size-1x-small;

  color: $ui-warning;
  background-color: $ui-warning-background;
  border-radius: $border-radius-base;
  opacity: 0;

  transition: opacity 0.2s ease-in-out;

  z-index: $z-index-atmosphere;
  pointer-events: none;

  @include respond-at($breakpoint-tablet-default) {
    width: 28rem;
  }

  &::before {
    content: "";

    position: absolute;
    top: calc(100% - #{$arrow-size / 2});
    left: var(--tooltip-arrow-x, 50%);

    width: $arrow-size;
    height: $arrow-size;

    background-color: $ui-warning-background;

    transform: translateX(-50%) rotate(45deg);
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-tooltip--down {
  .m-tooltip__content {
    top: calc(100% + 1rem);
    bottom: auto;

    &::before {
      top: auto;
      bottom: calc(100% - #{$arrow-size / 2});
      left: var(--tooltip-arrow-x, 50%);
    }
  }
}

.m-tooltip--left,
.m-tooltip--right {
  .m-tooltip__content {
    top: 50%;
    bottom: auto;

    &::before {
      top: var(--tooltip-arrow-y, 50%);

      transform: translateY(-50%) rotate(45deg);
    }
  }
}

.m-tooltip--left {
  .m-tooltip__content {
    left: -2rem;

    transform: translateX(calc(-100% + var(--tooltip-offset-x, 0px)))
      translateY(calc(-50% + var(--tooltip-offset-y, 0px)));

    &::before {
      left: calc(100% - #{$arrow-size / 2});
    }
  }
}

.m-tooltip--right {
  .m-tooltip__content {
    right: -2rem;
    left: auto;

    transform: translateX(calc(100% + var(--tooltip-offset-x, 0px)))
      translateY(calc(-50% + var(--tooltip-offset-y, 0px)));

    &::before {
      left: -$arrow-size / 2;
    }
  }
}

// ============================================================================
// :: States - active
// ============================================================================
.m-tooltip {
  &.is-active {
    .m-tooltip__icon {
      color: $text-color-base;
    }

    .m-tooltip__content {
      opacity: 1;

      pointer-events: auto;
    }
  }
}

@media (hover: hover) and (pointer: fine) {
  .m-tooltip {
    &:hover {
      .m-tooltip__icon {
        color: $text-color-base;
      }

      .m-tooltip__content {
        opacity: 1;

        pointer-events: auto;
      }
    }
  }
}