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

  padding: spacing.get('s4');
  display: none;
  z-index: 4;
  max-width: settings.$max-width;
  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 content-arrow() { ... }@mixin content-arrow() { 
  $width: settings.$arrow-size * 0.5;

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

  #{$content-selector}[data-popper-placement^='top'] & {
    top: 100%;
    border-bottom: 0;
    border-top-color: settings.$background-color;
  }

  #{$content-selector}[data-popper-placement^='left'] & {
    left: 100%;
    border-right: 0;
    border-left-color: settings.$background-color;
  }

  #{$content-selector}[data-popper-placement^='right'] & {
    right: 100%;
    border-left: 0;
    border-right-color: settings.$background-color;
  }

  #{$content-selector}[data-popper-placement^='bottom'] & {
    bottom: 100%;
    border-top: 0;
    border-bottom-color: settings.$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: settings.$border-color;
    }

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

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

    #{$content-selector}[data-popper-placement^='bottom'] & {
      top: settings.$border-width * -1;
      left: $width * -1;
      border-bottom-color: settings.$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;