@layer utilities {
  .inkeep-d_inline-flex {
    display: inline-flex
    }

  .inkeep-bg_inherit {
    background: inherit
    }

  .inkeep-text_inherit {
    color: inherit
    }
    .hover\:inkeep-bg_transparent\!:is(:hover, [data-hover]) {
      background-color: var(--inkeep-colors-transparent) !important
        }

  .inkeep-z_tooltip {
    z-index: var(--inkeep-z-index-tooltip)
    }

  .inkeep-overflow-y_auto {
    overflow-y: auto
    }

  .inkeep-mb_12px {
    margin-bottom: 12px
    }

  .inkeep-justify_space-between {
    justify-content: space-between
    }

  .inkeep-bg_inkeepPrimary\.textSubtle {
    background: var(--inkeep-colors-inkeep-primary-text-subtle)
    }

  .inkeep-mb_0 {
    margin-bottom: var(--inkeep-spacing-0)
    }

  .inkeep-cursor_pointer {
    cursor: pointer
    }

  .inkeep-leading_shorter {
    line-height: var(--inkeep-line-heights-shorter)
    }

  .inkeep-px_2 {
    padding-inline: var(--inkeep-spacing-2)
    }

  .inkeep-fs_xs {
    font-size: var(--inkeep-font-sizes-xs)
    }

  .inkeep-transform_all_0\.2s_ease-in-out {
    transform: all 0.2s ease-in-out
    }

  .inkeep-rounded_4px_4px_0_0 {
    border-radius: 4px 4px 0 0
    }

  .inkeep-d_flex {
    display: flex
    }

  .inkeep-items_center {
    align-items: center
    }

  .inkeep-rounded_8 {
    border-radius: 8px
    }

  .inkeep-text_gray\.400 {
    color: var(--inkeep-colors-gray-400)
    }
    .hover\:inkeep-text_white:is(:hover, [data-hover]) {
      color: var(--inkeep-colors-white)
        }
}

@layer recipes.slots {
  .inkeep-tooltip__content--variant_default {
    font-weight: var(--inkeep-font-weights-normal);
    }
    .light .inkeep-tooltip__content--variant_default, [data-theme="light"] .inkeep-tooltip__content--variant_default {
      background: var(--inkeep-colors-white);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      color: var(--inkeep-colors-gray-800);
      --tooltip-arrow-bg: white
    
        }
    .dark .inkeep-tooltip__content--variant_default, [data-theme="dark"] .inkeep-tooltip__content--variant_default {
      background: var(--inkeep-colors-gray-dark-800);
      color: var(--inkeep-colors-white-alpha-800);
      --tooltip-arrow-bg: var(--inkeep-colors-gray-dark-800)
    
        }

  @layer _base {
    .inkeep-tooltip__arrow {
      --arrow-size: var(--inkeep-sizes-3);
      --arrow-background: var(--tooltip-arrow-bg)
        }

    .inkeep-icon {
      width: 1em;
      height: 1em;
      display: inline-block;
      line-height: 1em;
      flex-shrink: 0;
      color: currentColor;
      vertical-align: middle
        }
    }

  @layer _base {
      .inkeep-tooltip__arrowTip:is([open], [data-open], [data-state="open"]) {
        animation: fade-in 0.25s ease-out
            }
      .inkeep-tooltip__arrowTip:is([data-state=closed]) {
        animation: fade-out 0.2s ease-out
            }
    }

  @layer _base {
    .inkeep-tooltip__positioner {
      --tooltip-arrow-bg: var(--tooltip-bg);
      --tooltip-bg: var(--inkeep-colors-gray-700);
      --tooltip-fg: var(--inkeep-colors-white-alpha-900);
        }
      .dark .inkeep-tooltip__positioner, [data-theme="dark"] .inkeep-tooltip__positioner {
        --tooltip-bg: var(--inkeep-colors-gray-300)
    ;
        --tooltip-fg: var(--inkeep-colors-gray-900)
    
            }
    .inkeep-tooltip__content {
      background: var(--tooltip-bg);
      color: var(--tooltip-fg);
      font-weight: var(--inkeep-font-weights-medium);
      font-size: var(--inkeep-font-sizes-sm);
      box-shadow: var(--inkeep-shadows-md);
      max-width: var(--inkeep-sizes-xs);
      z-index: var(--inkeep-z-index-tooltip);
      padding-block: var(--inkeep-spacing-2);
      padding-inline: var(--inkeep-spacing-3);
      border-radius: var(--inkeep-radii-md);
        }
    }

  @layer _base {
      .inkeep-tooltip__content:is([open], [data-open], [data-state="open"]) {
        animation: fade-in 0.25s ease-out
            }
      .inkeep-tooltip__content:is([data-state=closed]) {
        animation: fade-out 0.2s ease-out
            }
    }
}

@layer recipes {
  .inkeep-code--variant_subtle {
    --badge-bg: colorPalette.100;
    --badge-color: var(--inkeep-colors-color-palette-800);
    }
    .dark .inkeep-code--variant_subtle, [data-theme="dark"] .inkeep-code--variant_subtle {
      --badge-bg-alpha: color-mix(in srgb, transparent 84%, var(--colors-color-palette-200))
    ;
      --badge-bg: var(--badge-bg-alpha, var(--colors-color-palette-200))
    ;
      --badge-color: var(--inkeep-colors-color-palette-200)
    
        }

  @layer _base {
    .inkeep-code {
      font-family: var(--inkeep-fonts-mono);
      font-size: var(--inkeep-font-sizes-sm);
      padding-inline: 0.2em;
      border-radius: var(--inkeep-radii-sm);
      background: var(--badge-bg, inherit);
      color: var(--badge-color, inherit);
      box-shadow: var(--badge-shadow)
        }
    }
}