@layer utilities {

  .inkeep-items_center {
    align-items: center
    }

  .inkeep-mr_2 {
    margin-right: var(--inkeep-spacing-2)
    }

  .inkeep-d_inline-flex {
    display: inline-flex
    }
    .light .light\:inkeep-bg_gray\.100, [data-theme="light"] .light\:inkeep-bg_gray\.100 {
      background: var(--inkeep-colors-gray-100)
        }
    .light .light\:inkeep-text_gray\.700, [data-theme="light"] .light\:inkeep-text_gray\.700 {
      color: var(--inkeep-colors-gray-700)
        }
    .dark .dark\:inkeep-bg_whiteAlpha\.200, [data-theme="dark"] .dark\:inkeep-bg_whiteAlpha\.200 {
      background: var(--inkeep-colors-white-alpha-200)
        }
    .dark .dark\:inkeep-text_whiteAlpha\.700, [data-theme="dark"] .dark\:inkeep-text_whiteAlpha\.700 {
      color: var(--inkeep-colors-white-alpha-700)
        }

  .inkeep-text_black {
    color: var(--inkeep-colors-black)
    }

  .inkeep-ml_1 {
    margin-left: var(--inkeep-spacing-1)
    }

  .inkeep-fs_sm {
    font-size: var(--inkeep-font-sizes-sm)
    }

  .inkeep-text-decor_none\! {
    text-decoration: none !important
    }
      .light .light\:hover\:inkeep-text_gray\.800:is(:hover, [data-hover]), [data-theme="light"] .light\:hover\:inkeep-text_gray\.800:is(:hover, [data-hover]) {
        color: var(--inkeep-colors-gray-800)
            }
      .light .light\:hover\:inkeep-text-decor_none\!:is(:hover, [data-hover]), [data-theme="light"] .light\:hover\:inkeep-text-decor_none\!:is(:hover, [data-hover]) {
        text-decoration: none !important
            }
      .dark .dark\:hover\:inkeep-text_whiteAlpha\.800:is(:hover, [data-hover]), [data-theme="dark"] .dark\:hover\:inkeep-text_whiteAlpha\.800:is(:hover, [data-hover]) {
        color: var(--inkeep-colors-white-alpha-800)
            }
      .dark .dark\:hover\:inkeep-text-decor_none\!:is(:hover, [data-hover]), [data-theme="dark"] .dark\:hover\:inkeep-text-decor_none\!:is(:hover, [data-hover]) {
        text-decoration: none !important
            }
}

@layer recipes {
  .inkeep-tag--size_md {
    --tag-min-height: var(--inkeep-sizes-6);
    --tag-min-width: var(--inkeep-sizes-6);
    --tag-font-size: var(--inkeep-font-sizes-sm);
    --tag-padding-inline: var(--inkeep-space-2)
    }

  .inkeep-tag--variant_subtle {
    --badge-bg: colorPalette.100;
    --badge-color: var(--inkeep-colors-color-palette-800);
    }
    .dark .inkeep-tag--variant_subtle, [data-theme="dark"] .inkeep-tag--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-tag {
      --inkeep-colors-color-palette-50: var(--inkeep-colors-gray-50);
      --inkeep-colors-color-palette-100: var(--inkeep-colors-gray-100);
      --inkeep-colors-color-palette-200: var(--inkeep-colors-gray-200);
      --inkeep-colors-color-palette-300: var(--inkeep-colors-gray-300);
      --inkeep-colors-color-palette-400: var(--inkeep-colors-gray-400);
      --inkeep-colors-color-palette-500: var(--inkeep-colors-gray-500);
      --inkeep-colors-color-palette-600: var(--inkeep-colors-gray-600);
      --inkeep-colors-color-palette-700: var(--inkeep-colors-gray-700);
      --inkeep-colors-color-palette-800: var(--inkeep-colors-gray-800);
      --inkeep-colors-color-palette-900: var(--inkeep-colors-gray-900);
      --inkeep-colors-color-palette-950: var(--inkeep-colors-gray-950);
      font-weight: var(--inkeep-font-weights-medium);
      line-height: 1.2;
      outline: 0;
      --tag-color: var(--badge-color, inherit);
      --tag-bg: var(--badge-bg, inherit);
      --tag-shadow: var(--badge-shadow);
      color: var(--tag-color);
      background: var(--tag-bg);
      box-shadow: var(--tag-shadow);
      border-radius: var(--inkeep-radii-md);
      min-height: var(--tag-min-height);
      min-width: var(--tag-min-width);
      font-size: var(--tag-font-size);
      padding-inline: var(--tag-padding-inline);
      display: inline-flex;
      vertical-align: top;
      align-items: center;
      max-width: 100%;
        }
      .inkeep-tag:is(:focus-visible, [data-focus-visible]) {
        --tag-shadow: var(--inkeep-shadows-outline)
    
            }
    }

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