@mixin tooltip() { ... }@mixin tooltip() { 
  @include typography.style-as('paragraph-1');

  padding: spacing.get('s4');
  display: none;
  z-index: 4;
  max-width: min(settings.$max-width, calc(100vw - spacing.get('s2') * 2));
  border-radius: settings.$border-radius;
  border: settings.$border-width solid settings.$border-color;
  background-color: settings.$background-color;
  color: settings.$text-color;
 }

@mixin show() { ... }@mixin show() { 
  display: block;
 }

@mixin sr-only() { ... }@mixin sr-only() { 
  display: none;
 }

@mixin trigger() { ... }@mixin trigger() { 
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: underline dotted;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: unit.rem(2px);
  background-color: unset;
  user-select: none;

  &:focus-visible {
    outline: unit.rem(1px) solid color.get('link', 'focus', 'primary');
  }
 }

@mixin content-arrow() { ... }@mixin content-arrow() { 
  --kib-tooltip-background-color: #{settings.$background-color};
  --kib-tooltip-border-color: #{settings.$border-color};

  $width: settings.$arrow-size * 0.5;

  position: absolute;
  width: 0;
  height: 0;
  border: $width solid transparent;
  transform-style: preserve-3d;

  @media (forced-colors: active) {
    --kib-tooltip-background-color: Canvas;
    --kib-tooltip-border-color: CanvasText;

    forced-color-adjust: none;
  }

  #{$content-selector}[data-popper-placement^='top'] & {
    top: 100%;
    border-bottom: 0;
    border-top-color: var(--kib-tooltip-background-color);
  }

  #{$content-selector}[data-popper-placement^='left'] & {
    left: 100%;
    border-right: 0;
    border-left-color: var(--kib-tooltip-background-color);
  }

  #{$content-selector}[data-popper-placement^='right'] & {
    right: 100%;
    border-left: 0;
    border-right-color: var(--kib-tooltip-background-color);
  }

  #{$content-selector}[data-popper-placement^='bottom'] & {
    bottom: 100%;
    border-top: 0;
    border-bottom-color: var(--kib-tooltip-background-color);
  }

  // Arrow border for contrast
  &::after {
    position: inherit;
    border: inherit;
    content: '';
    transform: translateZ(-1px);

    #{$content-selector}[data-popper-placement^='top'] & {
      bottom: settings.$border-width * -1;
      left: $width * -1;
      border-top-color: var(--kib-tooltip-border-color);
    }

    #{$content-selector}[data-popper-placement^='left'] & {
      right: settings.$border-width * -1;
      top: $width * -1;
      border-left-color: var(--kib-tooltip-border-color);
    }

    #{$content-selector}[data-popper-placement^='right'] & {
      left: settings.$border-width * -1;
      top: $width * -1;
      border-right-color: var(--kib-tooltip-border-color);
    }

    #{$content-selector}[data-popper-placement^='bottom'] & {
      top: settings.$border-width * -1;
      left: $width * -1;
      border-bottom-color: var(--kib-tooltip-border-color);
    }
  }
 }

$max-width: unit.rem(288px) !default;

$background-color: color.get('ui-bg', '02') !default;

$border-color: color.get('ui-bg', '05') !default;

$border-radius: kib-core.dimensions-get(small) !default;

$border-width: unit.rem(1px) !default;

$text-color: color.get('text', 'primary') !default;

$width-default: unit.rem(224px) !default;

$width-large: unit.rem(328px) !default;

$width-huge: unit.rem(480px) !default;

$width-giant: unit.rem(960px) !default;

$arrow-size: kib-core.dimensions-get(large) !default;

$z-index: kib-core.zindex-get(kib-popper) !default;

$close-icon-color: currentColor !default;

$close-icon-size: kib-core.dimensions-get(default) !default;

$close-position: kib-core.dimensions-get(small) !default;