@use "config";
@use "mixins";
@use "variables";
@use "sass:color";
@use "sass:map";
@use "sass:math";

.info-box {
  $self: &;
  display: inline-block;
  position: relative;

  &.active {
    .info-box__content {
      display: block !important;
    }
  }

  &__content {
    background-color: map.get(variables.$greyscale, "white");
    border: 1px solid
      color.adjust(
        map.get(variables.$greyscale, "light"),
        $lightness: math.percentage(config.$hue-threshold * 2)
      );
    box-shadow: 0 1rem 2rem rgba(map.get(variables.$greyscale, "black"), 0.4);
    display: none;
    margin-top: variables.$spacer;
    padding: map.get(variables.$spacers, 5) map.get(variables.$spacers, 4);
    position: absolute;
    top: 100%;
    width: 20rem;
    z-index: 50;

    @include mixins.breakpoint(tablet, max) {
      position: fixed;
      bottom: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: 0;
      max-height: 100vh;
      overflow-y: auto;

      .header-fixed & {
        max-height: calc(100vh - #{var(--menu-height)});
        top: calc(50% + (#{var(--menu-height)} / 2));
      }

      &::before,
      &::after {
        display: none;
      }
    }

    &:before {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 8px 12px 8px;
      border-color: transparent transparent
        map.get(variables.$greyscale, "white") transparent;
      top: -12px;
      left: 0;
      margin: 0 map.get(variables.$spacers, 2);
      z-index: 1;
    }

    &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 10px 14px 10px;
      border-color: transparent transparent
        color.adjust(
          map.get(variables.$greyscale, "light"),
          $lightness: math.percentage(config.$hue-threshold * 2)
        );
      top: -14px;
      left: -2px;
      margin: 0 map.get(variables.$spacers, 2);
      z-index: 0;
    }
    &.content--right {
      /* for use if the button is affixed to the right side of the screen with nothing to buffer it */
      &:before {
        left: auto;
        right: 1px;
      }
      &:after {
        left: auto;
        right: -1px;
      }
    }
  }

  &__close {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }

  // .info-box--left
  &--left {
    .info-box__content {
      right: 0;

      &:before {
        left: auto;
        right: 1px;
      }

      &:after {
        left: auto;
        right: -1px;
      }
    }
  }
}