/* stylelint-disable css-modules/css-variables */
@import '../../styles/colors-v2.css';
@import '../../styles/spacing.css';
@import '../../styles/typography-v2.css';

.wrapper {
  width: fit-content;
  position: relative;
  display: inline-flex;
}

.tooltip {
  position: absolute;
  padding: var(--spacing-medium);
  width: fit-content;
  max-width: calc(10 * var(--spacing-x-large));
  font: var(--mds-type-subtext);
  border-radius: 3px;
  background-color: var(--mds-grey-87);
  border-color: var(--mds-grey-87);
  color: var(--white);
  z-index: 65536; /* a tooltip should be able to sit above modals and other stacked objects */
}

.tooltipLight {
  composes: tooltip;
  background-color: var(--white);
  color: var(--black);
  border-color: var(--white);
  border-radius: var(--spacing-small);
  filter: drop-shadow(0 0 var(--spacing-medium) rgba(0, 0, 0, 0.25));
}

.top::before,
.bottom::before,
.left::before,
.right::before {
  content: '';
  border: var(--triangle-height) solid transparent; /* stylelint-disable-line mds/colors */
  position: absolute;
}

.top::before {
  border-top-color: var(--mds-grey-87);
  left: calc(50% - var(--triangle-height));
  top: 100%;
}

.bottom::before {
  border-bottom-color: var(--mds-grey-87);
  left: calc(50% - var(--triangle-height));
  top: calc(-2 * var(--triangle-height));
}

.left::before {
  border-left-color: var(--mds-grey-87);
  left: 100%;
  top: calc(50% - var(--triangle-height));
}

.right::before {
  border-right-color: var(--mds-grey-87);
  left: calc(-2 * var(--triangle-height));
  top: calc(50% - var(--triangle-height));
}

.tooltipLight.top::before {
  border-top-color: var(--white);
}

.tooltipLight.bottom::before {
  border-bottom-color: var(--white);
}

.tooltipLight.left::before {
  border-left-color: var(--white);
}

.tooltipLight.right::before {
  border-right-color: var(--white);
}

/*
  This is to prevent the tooltip from jumping around when a scrollbar appears / disappears. While adding a style like
  this only on specific components can definitely cause some intermittent global pollution, the choice was either add
  it only where it is needed (e.g. the tooltip), or globally everywhere, even when it isn't needed. It _should not_
  cause much in the way of styling pollution other than preventing thescreen from "jumping" when a scrollbar appears,
  but that is always possible.
*/
html {
  width: 100vw;
}