/* <tooltip> - Custom HTML component for tooltips */

/* Documentation: */
/* <tooltip> properties (apply these to <tooltip> HTML component): */
/* - inert - indicates that the tooltip component should be ignored by the browser for click or focus events (see MSDN page: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) */
/* - position - "top", "bottom", "left", or "right". Determine position of the tooltip relative to its parent element. If not specified, the default is "top". */

tooltip {
  --_arrow-size: 8px; /* size of the arrow that points from the tooltip to its parent */
  --_padding-vertical: 1rem;
  --_padding-horizontal: 0.5rem;
  --_shadow-opacity: 25%;

  /* render arrow graphics */
  --_arrow-bottom: conic-gradient(from -30deg at bottom, #0000, var(--ink) 1deg 60deg, #0000 61deg) bottom / 100% 50% no-repeat;
  --_arrow-top: conic-gradient(from 150deg at top, #0000, var(--ink) 1deg 60deg, #0000 61deg) top / 100% 50% no-repeat;
  --_arrow-right: conic-gradient(from -120deg at right, #0000, var(--ink) 1deg 60deg, #0000 61deg) right / 50% 100% no-repeat;
  --_arrow-left: conic-gradient(from 60deg at left, #0000, var(--ink) 1deg 60deg, #0000 61deg) left / 50% 100% no-repeat;

  pointer-events: none;
  user-select: none;
  position: absolute;
  z-index: 10;
  opacity: 0;
  inline-size: max-content;
  max-inline-size: 32ch; /* maximum number of characters before the tooltip breaks to new line */
  text-align: start;
  white-space: normal;
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.25rem;
  border-radius: var(--border-radius);
  padding: var(--_padding-horizontal) var(--_padding-vertical);
  margin: 0;
  background-color: var(--ink);
  color: var(--pure-white) !important; /* reset the text color value applied by some parent components */

  transform: translateX(var(--_pos_x, 0)) translateY(var(--_pos_y, 0)); /* position the tooltip based on the chosen "position" property - see definitions for each below */
  transition: opacity .2s ease, transform .2s ease;

  filter:
          drop-shadow(0 2px 2px hsl(0 0% 0% / var(--_shadow-opacity)))
          drop-shadow(0 6px 6px hsl(0 0% 0% / var(--_shadow-opacity)));

  /* create the base for the tooltip arrow */
  &::after {
    content: "";
    background: var(--ink);
    position: absolute;
    z-index: -1;
    inset: 0;
    mask: var(--_arrow);
  }

  /* Fixed tooltip for escaping overflows */
  &:is([position="middle"]) {
    inset-inline-start: 50%;
    inset-block-end: 50%;
    --_pos_x: -50%;

  }

  /* Top Tooltip */
  /* This is the default tooltip alignment if position is not specified. */

  &:is([position="top"], :not([position])) {
    inset-inline-start: 50%;
    inset-block-end: calc(100% + var(--_arrow-size) + var(--_padding-vertical));
    --_pos_x: -50%;

    &::after {
      --_arrow: var(--_arrow-bottom);
      inset-block-end: calc(var(--_arrow-size) * -1);
      border-block-end: var(--_arrow-size) solid transparent;
    }

    /* Animation */
    @media (prefers-reduced-motion: no-preference) {
      :has(> &):not(:hover, :active) tooltip {
        --_pos_y: 6px;
      }
    }
  }

  /* Right Tooltip */
  &:is([position="right"]) {
    inset-inline-start: calc(100% + var(--_arrow-size) + var(--_padding-horizontal));
    inset-block-end: 50%;
    --_pos_y: 50%;

    &::after {
      --_arrow: var(--_arrow-left);
      inset-inline-start: calc(var(--_arrow-size) * -1);
      border-inline-start: var(--_arrow-size) solid transparent;
    }

    /* Animation */
    @media (prefers-reduced-motion: no-preference) {
      :has(> &):not(:hover, :active) tooltip {
        --_pos_x: -6px;
      }
    }
  }

  /* Left Tooltip */
  &:is([position="left"]) {
    inset-inline-end: calc(100% + var(--_padding-horizontal) + var(--_arrow-size));
    inset-block-end: 50%;
    --_pos_y: 50%;

    &::after {
      --_arrow: var(--_arrow-right);
      inset-inline-end: calc(var(--_arrow-size) * -1);
      border-block-end: var(--_arrow-size) solid transparent;
    }

    /* Animation */
    @media (prefers-reduced-motion: no-preference) {
      :has(> &):not(:hover, :active) tooltip {
        --_pos_x: 6px;
      }
    }
  }

  /* Bottom Tooltip */
  &:is([position="bottom"]) {
    inset-inline-start: 50%;
    inset-block-start: calc(100% + var(--_padding-vertical) + var(--_arrow-size));
    --_pos_x: -50%;

    &::after {
      --_arrow: var(--_arrow-top);
      inset-block-start: calc(var(--_arrow-size) * -1);
      border-block-start: var(--_arrow-size) solid transparent;
    }

    /* Animation */
    @media (prefers-reduced-motion: no-preference) {
      :has(> &):not(:hover, :active) tooltip {
        --_pos_y: -6px;
      }
    }
  }
}

/* Target the tooltip parent */
:has(> tooltip) {
  position: relative;

  /* Style the tooltip component when its parent is hovered */
  &:is(:hover, :focus-visible, :active) > tooltip {
    opacity: 1;
    transition-delay: 200ms;
  }
}

/*RYAL: 2818: Review*/
.temp-tooltip-wrapper {
  display: inline-flex;
  height: fit-content;
  width: fit-content;
  text-transform: none;

  &.centre-align {
    align-items: center;
  }

  .fixed-tooltip {
    position: static;

  }

  &.tooltip-notice {
    & > svg {
      fill: var(--brand-charcoal);
    }
  }
}