@layer brand, tokens, density, elements, values, brand-mark, spacing, cut-edges, actions, panels, marks, roles, headings, regions, authored-text, shell, absence, layouts, motion, states, embed, tables, truncation, print, without-fills, hidden;
@layer elements {
  .kit-role-tooltip {
    overflow-wrap: break-word;
  }
}
@layer roles {
  .kit-role-tooltip[popover] {
    --_kit-tooltip-rest: .4s;
    --_kit-tooltip-warm: .3s;
    --_kit-anchor-gap: var(--_kit-rhythm);
    --_kit-text-ink: var(--_kit-reversed-ink);
    --_kit-link: initial;
    --_kit-text-muted: var(--_kit-reversed-muted);
    position: fixed;
    inset: auto;
    top: var(--kit-anchor-y, 0px);
    left: var(--kit-anchor-x, 0px);
    inline-size: max-content;
    max-inline-size: var(--_kit-popover-width);
    margin: 0;
    overflow: visible;
    padding: var(--_kit-rhythm) var(--_kit-inset-tight);
    border: 0;
    border-radius: var(--_kit-inner-radius);
    background: var(--_kit-reversed);
    color: var(--_kit-text-ink);
    box-shadow: var(--_kit-lift);
    font-size: var(--_kit-label-size);
    opacity: 0;
    scale: var(--_kit-popover-scale);
    translate: 0 var(--_kit-popover-travel);
    transform-origin: var(--kit-anchor-origin, bottom center);
    transition:
      opacity var(--_kit-popover-duration) var(--_kit-settle),
      scale var(--_kit-popover-duration) var(--_kit-settle),
      translate var(--_kit-popover-duration) var(--_kit-settle),
      display var(--_kit-popover-duration) var(--_kit-settle) allow-discrete,
      overlay var(--_kit-popover-duration) var(--_kit-settle) allow-discrete;
  }
  .kit-role-tooltip[popover][data-kit-side=below] {
    translate: 0 calc(-1 * var(--_kit-popover-travel));
  }
  .kit-role-tooltip[popover][data-kit-side=trailing] {
    translate: calc(-1 * var(--_kit-popover-travel)) 0;
  }
  .kit-role-tooltip[popover][data-kit-side=trailing]:dir(rtl) {
    translate: var(--_kit-popover-travel) 0;
  }
  .kit-role-tooltip[popover]:popover-open {
    display: flex;
    align-items: baseline;
    gap: var(--_kit-inset-tight);
    opacity: 1;
    scale: none;
    translate: none;
  }
  @starting-style {
    html[data-kit-shown] .kit-role-tooltip[popover]:popover-open {
      opacity: 0;
      scale: var(--_kit-popover-scale);
    }
  }
  .kit-role-tooltip[popover]:before,
  .kit-role-tooltip[popover]:after {
    --_kit-anchor-gap: inherit;
    content: "";
    position: absolute;
  }
  .kit-role-tooltip[popover]:before {
    inset-inline: 0;
    block-size: var(--_kit-anchor-gap);
  }
  .kit-role-tooltip[popover]:after {
    inline-size: calc(2 * var(--_kit-anchor-gap));
    block-size: var(--_kit-anchor-gap);
    left: calc(var(--kit-anchor-centre, 50%) - var(--_kit-anchor-gap));
    background: inherit;
  }
  .kit-role-tooltip[popover][data-kit-side=above]:before,
  .kit-role-tooltip[popover]:not([data-kit-side]):before {
    top: 100%;
  }
  .kit-role-tooltip[popover][data-kit-side=above]:after,
  .kit-role-tooltip[popover]:not([data-kit-side]):after {
    top: 100%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .kit-role-tooltip[popover][data-kit-side=below]:before {
    bottom: 100%;
  }
  .kit-role-tooltip[popover][data-kit-side=below]:after {
    bottom: 100%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .kit-role-tooltip[popover][data-kit-side=trailing]:before {
    inset-inline: auto 100%;
    inset-block: 0;
    inline-size: var(--_kit-anchor-gap);
    block-size: auto;
  }
  .kit-role-tooltip[popover][data-kit-side=trailing]:after {
    inset-inline: auto 100%;
    top: calc(var(--kit-anchor-centre, 50%) - var(--_kit-anchor-gap));
    left: auto;
    inline-size: var(--_kit-anchor-gap);
    block-size: calc(2 * var(--_kit-anchor-gap));
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
  }
  .kit-role-tooltip[popover][data-kit-side=trailing]:dir(rtl):after {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .kit-role-tooltip[popover] > .kit-region-name + .kit-region-name {
    margin-inline-start: calc(-1 * var(--_kit-inset-tight));
  }
  .kit-role-tooltip[popover] > .kit-region-name + .kit-region-name:before {
    content: "\a0\b7\a0" / "";
    color: var(--_kit-text-muted);
  }
  .kit-role-tooltip[popover] > .kit-region-keys {
    display: inline-flex;
    gap: var(--_kit-rhythm);
    color: var(--_kit-text-muted);
    font-family: var(--_kit-mono-family);
  }
  .kit-role-tooltip[popover] > .kit-region-keys > .kit-region-key {
    font: inherit;
  }
}