@layer components {
  .tooltip.block {
    display: contents;
  }
  .tooltip {
    --tooltip-card-padding: 1.5rem;
    --tooltip-card-radius: 0.5rem;
    --tooltip-card-z: 1;
    --tooltip-card-bg: #000000;
    --tooltip-card-text: #ffffff;
    --tooltip-trigger-color: var(--theme-icon-primary);
    --tooltip-decoration-icon-size: 1.5rem;
    --tooltip-trigger-icon-size: 2rem;
    --tooltip-header-gap: 2rem;
    --tooltip-column-gap: 0.5rem;
    --tooltip-row-gap: 2rem;
    --tooltip-trigger-gap: 1.5rem;
    --tooltip-sections-gap: 2rem;
    --tooltip-gutter: 1.5rem;
    position: relative;
    display: inline-grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--tooltip-column-gap);
    align-items: center;
    color: var(--tooltip-trigger-color);
    width: 100%;
  }
  .tooltip[data-state=opening],
  .tooltip[data-state=open],
  .tooltip[data-state=closing] {
    z-index: var(--tooltip-card-z);
  }
  .tooltip__icon,
  .tooltip__item-icon {
    --icon-color: var(--tooltip-card-text);
    max-width: var(--tooltip-decoration-icon-size);
  }
  .tooltip__trigger-icon {
    --icon-color: var(--tooltip-trigger-color);
    max-width: var(--tooltip-decoration-icon-size);
  }
  .tooltip__item-icon {
    grid-column: 1/1;
  }
  .tooltip__label {
    color: inherit;
  }
  .tooltip__body-label {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: inherit;
  }
  .tooltip__label {
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    grid-column: 1/3;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .tooltip__label--has-icon {
    grid-column: 2/3;
  }
  .tooltip__body-label {
    grid-column: 1/3;
  }
  .tooltip__body-label--has-icon {
    grid-column: 2/3;
  }
  .tooltip__trigger-content {
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    grid-column: 1/3;
    color: inherit;
  }
  .tooltip--has-icon .tooltip__label--has-icon + .tooltip__trigger-content {
    grid-column: 2/3;
  }
  .tooltip__icon-container,
  .tooltip__body-close,
  .tooltip__action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: var(--tooltip-trigger-icon-size);
    height: var(--tooltip-trigger-icon-size);
    padding: 0.125rem;
    color: inherit;
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .tooltip__icon-container .button-content,
  .tooltip__body-close .button-content,
  .tooltip__action .button-content {
    display: contents;
  }
  .tooltip__body-close,
  .tooltip__action {
    grid-column: 3;
    grid-row: -1;
    background: none;
    border: none;
    cursor: pointer;
  }
  .tooltip__action .icon {
    --icon-color: var(--theme-text-primary);
  }
  .tooltip__body-close .icon {
    --icon-color: var(--tooltip-card-text);
  }
  .tooltip__action:focus-visible, .tooltip__action.focus {
    outline-color: var(--theme-focus-primary);
  }
  .tooltip__body-close:focus-visible, .tooltip__body-close.focus {
    outline-color: #ffffff;
  }
  .tooltip__icon-container {
    max-width: var(--tooltip-decoration-icon-size);
  }
  .tooltip__body-close {
    margin-left: var(--tooltip-trigger-gap);
  }
  .tooltip[data-state=opening] > .tooltip__icon-container,
  .tooltip[data-state=opening] > .tooltip__label,
  .tooltip[data-state=opening] > .tooltip__action,
  .tooltip[data-state=opening] > .tooltip__trigger-content,
  .tooltip[data-state=open] > .tooltip__icon-container,
  .tooltip[data-state=open] > .tooltip__label,
  .tooltip[data-state=open] > .tooltip__action,
  .tooltip[data-state=open] > .tooltip__trigger-content,
  .tooltip[data-state=closing] > .tooltip__icon-container,
  .tooltip[data-state=closing] > .tooltip__label,
  .tooltip[data-state=closing] > .tooltip__action,
  .tooltip[data-state=closing] > .tooltip__trigger-content {
    opacity: 0;
  }
  .tooltip__body {
    position: absolute;
    top: calc(-1 * var(--tooltip-card-padding));
    left: calc(-1 * var(--tooltip-card-padding));
    max-width: calc(100vw - 0.5rem * 2);
    padding: var(--tooltip-card-padding);
    padding-bottom: 0;
    background: var(--tooltip-card-bg);
    border-radius: var(--tooltip-card-radius);
    color: var(--tooltip-card-text);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--tooltip-column-gap);
    width: calc(100% + 2 * var(--tooltip-card-padding));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .tooltip[data-state=opening] .tooltip__body,
  .tooltip[data-state=open] .tooltip__body,
  .tooltip[data-state=closing] .tooltip__body {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .tooltip__body-content {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .tooltip[data-state=open] .tooltip__body-content {
    grid-template-rows: 1fr;
  }
  .tooltip__body-items {
    grid-column: 1/-1;
    overflow: hidden;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: var(--tooltip-row-gap);
  }
  .tooltip__item {
    display: grid;
    grid-template-columns: subgrid;
    align-items: flex-start;
    grid-column: 1/-1;
    gap: var(--tooltip-column-gap);
  }
  .tooltip__item:first-of-type {
    margin-top: var(--tooltip-header-gap);
  }
  .tooltip__item:last-of-type {
    padding-bottom: var(--tooltip-card-padding);
  }
  .tooltip__body:not(:has(.tooltip__body-label)) .tooltip__item:first-of-type {
    margin-top: 0;
  }
  .tooltip__item-title {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    grid-column: 1/-1;
    align-self: center;
  }
  .tooltip--has-icon .tooltip__item-title {
    grid-column: 2/-1;
  }
  .tooltip__item-text {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    min-height: 2rem;
  }
  .tooltip--has-icon .tooltip__item-text {
    grid-column: 2/-1;
  }
  .default-content-wrapper {
    box-sizing: border-box;
    margin-inline: 0;
    max-width: none;
  }
  .tooltip__body .tooltip__item-text a:not(.button) {
    color: inherit;
  }
  .tooltip__body .tooltip__item-text a:not(.button):focus-visible {
    outline-color: currentcolor;
  }
  [data-theme=dark] .tooltip {
    --tooltip-card-bg: #ffffff;
    --tooltip-card-text: #000000;
  }
  [data-theme=dark] .tooltip .tooltip__body-close:focus-visible, [data-theme=dark] .tooltip .tooltip__body-close.focus {
    outline-color: #000000;
  }
  @media (min-width: 768px) {
    --tooltip-gutter: 3rem;
  }
  @media (max-width: 1023px) {
    .tooltip {
      --tooltip-card-padding: 1rem;
    }
  }
  @media (min-width: 1024px) {
    .tooltip {
      --tooltip-trigger-icon-size: 1.5rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tooltip__icon-container,
    .tooltip__label,
    .tooltip__action,
    .tooltip__trigger-content,
    .tooltip__body,
    .tooltip__body-content {
      transition-duration: 0ms;
    }
  }
  @media (forced-colors: active) {
    .tooltip__body {
      border: 1px solid CanvasText;
      background: Canvas;
    }
    .tooltip__icon,
    .tooltip__trigger-icon,
    .tooltip__item-icon {
      background-color: CanvasText;
    }
  }
}