@use '../variables.scss' as *;

$horizontal-padding: 11px;

.control {
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

.tooltip {
  position: absolute;
  background-color: var(--theme-tooltip-body-bg);
  color: #dadaea;
  width: fit-content;
  max-width: 306px;
  border: 1px solid var(--theme-tooltip-border);
  border-top-width: $theme-tooltip-corner-radius;
  border-radius: $theme-tooltip-corner-radius;
  box-shadow: var(--theme-drop-shadow);
  text-align: left;
  z-index: 99999;
  white-space: pre-wrap;
  box-sizing: border-box;
  user-select: none;
  pointer-events: none;

  // The top 'ribbon' in tooltips that's tinted in different contexts (exotic perks, sub-class details)
  // Note: We don't use border-top-color or 'box-shadow: inset' to color the ribbon
  // to avoid alignment artefacts along the miter joints (top left & right corners) since the top border is thicker
  &::after {
    content: '';
    display: block;
    position: absolute;
    background-color: var(--tooltip-ribbon-color);
    height: $theme-tooltip-corner-radius;
    top: calc(-1 * $theme-tooltip-corner-radius);
    left: -1px;
    right: -1px;
    border-radius: $theme-tooltip-corner-radius $theme-tooltip-corner-radius 0 0;
  }

  &.wideTooltip {
    max-width: 100vw;
  }

  hr {
    border-color: var(--theme-tooltip-border);
  }

  p {
    margin-bottom: 0;

    &:first-of-type {
      margin: 0;
    }
  }

  .header {
    background-color: var(--theme-tooltip-header-bg);
    padding: 6px $horizontal-padding;

    h2 {
      font-size: 14px;
      margin: 0;
      color: var(--theme-text);

      @include destiny-header;
    }

    h3 {
      font-size: 12px;
      margin: 0;
      color: #8e8e9e;
    }
  }

  .content {
    padding: 8px $horizontal-padding;
  }

  .arrow {
    // Local variable used to re-size tooltip arrow when minimal size
    --arrow-size: #{$theme-tooltip-arrow-size};

    border-style: solid;
    position: absolute;
    border-color: transparent;
    border-width: var(--arrow-size);
  }

  &[data-popper-placement='top'] .arrow {
    border-bottom-width: 0;
    border-top-color: var(--theme-tooltip-border);
    bottom: calc(var(--arrow-size) * -1);
  }
  &[data-popper-placement='bottom'] .arrow {
    border-top-width: 0;
    border-bottom-color: var(--theme-tooltip-border);
    // Include corner radius so the arrow doesn't overlap with the ribbon
    top: calc((var(--arrow-size) + $theme-tooltip-corner-radius) * -1);
  }
  &[data-popper-placement='right'] .arrow {
    border-left-width: 0;
    border-right-color: var(--theme-tooltip-border);
    left: calc(var(--arrow-size) * -1);
  }
  &[data-popper-placement='left'] .arrow {
    border-right-width: 0;
    border-left-color: var(--theme-tooltip-border);
    right: calc(var(--arrow-size) * -1);
  }

  &.minimalTooltip {
    border-radius: 3px;
    border: none;
    box-shadow: var(--theme-drop-shadow);
    background-color: var(--theme-tooltip-minimal-bg);

    .arrow {
      --arrow-size: #{$theme-tooltip-arrow-size-mini};
    }

    // hide ribbon
    &::after {
      display: none;
    }

    .content {
      padding: 3px 6px;
    }

    &[data-popper-placement='left'] .arrow {
      border-left-color: var(--theme-tooltip-minimal-bg);
    }
    &[data-popper-placement='right'] .arrow {
      border-right-color: var(--theme-tooltip-minimal-bg);
    }
    &[data-popper-placement='top'] .arrow {
      border-top-color: var(--theme-tooltip-minimal-bg);
    }
    &[data-popper-placement='bottom'] .arrow {
      border-bottom-color: var(--theme-tooltip-minimal-bg);
      // Exclude corner radius because minimal tooltips don't have a ribbon
      top: calc(var(--arrow-size) * -1);
    }
  }

  .section:not(:empty) {
    margin: 8px #{-$horizontal-padding} -8px #{-$horizontal-padding};
    padding: 5px $horizontal-padding 7px $horizontal-padding;
    border-top: 1px solid rgb(255, 255, 255, 0.2);

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }

    &:first-child {
      margin-top: -7px;
      border-top: none;
    }
  }
}
