@layer utilities {
  .inkeep-fs_lg {
    font-size: var(--inkeep-font-sizes-lg);
    }

  .inkeep-font_medium {
    font-weight: var(--inkeep-font-weights-medium);
    }

  .inkeep-white-space_nowrap {
    white-space: nowrap;
    }

  .inkeep-mr_8 {
    margin-right: var(--inkeep-spacing-8);
    }

  .inkeep-max-w_180px {
    max-width: 180px;
    }

  .inkeep-ml_auto {
    margin-left: auto;
    }

  .inkeep-mt_2 {
    margin-top: var(--inkeep-spacing-2);
    }
    .hover\:inkeep-bg_gray\.100:is(:hover, [data-hover]) {
      background: var(--inkeep-colors-gray-100);
        }
      .dark .hover\:dark\:inkeep-bg_whiteAlpha\.200:is(:hover, [data-hover]), [data-theme="dark"] .hover\:dark\:inkeep-bg_whiteAlpha\.200:is(:hover, [data-hover]) {
        background: var(--inkeep-colors-white-alpha-200);
            }
    .active\:inkeep-bg_gray\.200:is(:active, [data-active]) {
      background: var(--inkeep-colors-gray-200);
        }
      .dark .active\:dark\:inkeep-bg_whiteAlpha\.300:is(:active, [data-active]), [data-theme="dark"] .active\:dark\:inkeep-bg_whiteAlpha\.300:is(:active, [data-active]) {
        background: var(--inkeep-colors-white-alpha-300);
            }

  .inkeep-border_gray\.200 {
    border-color: var(--inkeep-colors-gray-200);
    }
    .dark .dark\:inkeep-border_whiteAlpha\.300, [data-theme="dark"] .dark\:inkeep-border_whiteAlpha\.300 {
      border-color: var(--inkeep-colors-white-alpha-300);
        }

  .inkeep-bg_gray\.100 {
    background: var(--inkeep-colors-gray-100);
    }
    .dark .dark\:inkeep-bg_whiteAlpha\.200, [data-theme="dark"] .dark\:inkeep-bg_whiteAlpha\.200 {
      background: var(--inkeep-colors-white-alpha-200);
        }

  .inkeep-text_gray\.800 {
    color: var(--inkeep-colors-gray-800);
    }
    .dark .dark\:inkeep-text_whiteAlpha\.900, [data-theme="dark"] .dark\:inkeep-text_whiteAlpha\.900 {
      color: var(--inkeep-colors-white-alpha-900);
        }
    .hover\:inkeep-bg_gray\.200:is(:hover, [data-hover]) {
      background: var(--inkeep-colors-gray-200);
        }
      .dark .hover\:dark\:inkeep-bg_whiteAlpha\.300:is(:hover, [data-hover]), [data-theme="dark"] .hover\:dark\:inkeep-bg_whiteAlpha\.300:is(:hover, [data-hover]) {
        background: var(--inkeep-colors-white-alpha-300);
            }
      .hover\:disabled\:inkeep-bg_gray\.100:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
        background: var(--inkeep-colors-gray-100);
            }
        .dark .hover\:disabled\:dark\:inkeep-bg_whiteAlpha\.200:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]), [data-theme="dark"] .hover\:disabled\:dark\:inkeep-bg_whiteAlpha\.200:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
          background: var(--inkeep-colors-white-alpha-200);
                }
    .active\:inkeep-bg_gray\.300:is(:active, [data-active]) {
      background: var(--inkeep-colors-gray-300);
        }
      .dark .active\:dark\:inkeep-bg_whiteAlpha\.400:is(:active, [data-active]), [data-theme="dark"] .active\:dark\:inkeep-bg_whiteAlpha\.400:is(:active, [data-active]) {
        background: var(--inkeep-colors-white-alpha-400);
            }

  .inkeep-px_10 {
    padding-inline: var(--inkeep-spacing-10);
    }

  .inkeep-pt_3 {
    padding-top: var(--inkeep-spacing-3);
    }

  .inkeep-pb_6 {
    padding-bottom: var(--inkeep-spacing-6);
    }

  .inkeep-mt_4 {
    margin-top: var(--inkeep-spacing-4);
    }

  .inkeep-flex_row {
    flex-direction: row;
    }

  .inkeep-mb_2 {
    margin-bottom: var(--inkeep-spacing-2);
    }

  .inkeep---thickness_1px {
    --thickness: 1px;
    }

  .inkeep-border-block-end-width_var\(--thickness\) {
    border-block-end-width: var(--thickness);
    }

  .inkeep-d_flex {
    display: flex;
    }

  .inkeep-items_center {
    align-items: center;
    }

  .inkeep-gap_10px {
    gap: 10px;
    }

  .inkeep-flex_column {
    flex-direction: column;
    }

  .inkeep-pl_4 {
    padding-left: var(--inkeep-spacing-4);
    }

  .inkeep-w_100\% {
    width: 100%;
    }
}

@layer recipes {

  .inkeep-textarea--size_md {
    --input-font-size: var(--inkeep-font-sizes-md);
    --input-padding: var(--inkeep-space-4);
    --input-border-radius: var(--inkeep-radii-md);
    --input-height: var(--inkeep-sizes-10);
    }

  .inkeep-textarea--variant_outline {
    border: 1px solid;
    border-color: inherit;
    background: inherit;
    }
    .inkeep-textarea--variant_outline:is(:read-only, [data-read-only]) {
      box-shadow: var(--inkeep-shadows-none) !important;
      -webkit-user-select: all;
      user-select: all;
        }
    .inkeep-textarea--variant_outline:is(:invalid, [data-invalid]) {
      border-color: var(--input-error-border-color);
      box-shadow: 0 0 0 1px var(--input-error-border-color);
        }
    .inkeep-textarea--variant_outline:is(:focus-visible, [data-focus-visible]) {
      z-index: 1;
      border-color: var(--input-focus-border-color);
      box-shadow: 0 0 0 1px var(--input-focus-border-color);
        }
    .inkeep-textarea--variant_outline:is(:hover, [data-hover]) {
      border-color: var(--inkeep-colors-gray-300);
        }
    .dark .inkeep-textarea--variant_outline:is(:hover, [data-hover]), [data-theme="dark"] .inkeep-textarea--variant_outline:is(:hover, [data-hover]) {
      border-color: var(--inkeep-colors-white-alpha-400);
        }

  .inkeep-btn--colorPalette_gray {
    --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);
    }

  .inkeep-btn--variant_primaryFilled {
    background: var(--inkeep-colors-inkeep-primary-medium);
    color: var(--inkeep-colors-inkeep-primary-text-color-on-primary);
    }
    .inkeep-btn--variant_primaryFilled:is(:hover, [data-hover]) {
      background: var(--inkeep-colors-inkeep-primary-strong);
        }
    .inkeep-btn--variant_primaryFilled:is(:active, [data-active]) {
      background: var(--inkeep-colors-inkeep-primary-strong);
        }

  .inkeep-btn--size_md {
    height: var(--inkeep-sizes-10);
    min-width: var(--inkeep-sizes-10);
    font-size: var(--inkeep-font-sizes-md);
    padding-inline: var(--inkeep-spacing-4);
    }

  @layer _base {
    .inkeep-textarea {
      height: var(--input-height);
      font-size: var(--input-font-size);
      padding-inline: var(--input-padding);
      border-radius: var(--input-border-radius);
      width: 100%;
      min-width: var(--inkeep-sizes-0);
      outline: 0;
      position: relative;
      appearance: none;
      -webkit-appearance: none;
      --transition-prop: common;
      transition-property: common;
      --transition-duration: var(--inkeep-durations-normal);
      transition-duration: var(--inkeep-durations-normal);
      --input-focus-border-color: var(--inkeep-colors-blue-500);
      --input-error-border-color: var(--inkeep-colors-red-500);
      padding-block: var(--inkeep-spacing-2);
      min-height: var(--inkeep-sizes-20);
      line-height: var(--inkeep-line-heights-short);
      vertical-align: top;
        }
      .inkeep-textarea:is(:disabled, [disabled], [data-disabled]) {
        opacity: 0.4;
        cursor: not-allowed;
            }
      .dark .inkeep-textarea, [data-theme="dark"] .inkeep-textarea {
        --input-focus-border-color: var(--inkeep-colors-blue-300)
    ;
        --input-error-border-color: var(--inkeep-colors-red-300)
    ;
            }

    .inkeep-input__group {
      width: 100%;
      display: flex;
      position: relative;
      isolation: isolate;
      --input-border-radius: 0;
        }
      .inkeep-input__group > [data-placement="left"] {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
            }
      .inkeep-input__group > [data-placement="right"] {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
            }
      .inkeep-input__group:has([data-placement="right"]) > input {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
            }
    }

  @layer _base {
    .inkeep-textarea {
      height: var(--input-height);
      font-size: var(--input-font-size);
      padding-inline: var(--input-padding);
      border-radius: var(--input-border-radius);
      width: 100%;
      min-width: var(--inkeep-sizes-0);
      outline: 0;
      position: relative;
      appearance: none;
      -webkit-appearance: none;
      --transition-prop: common;
      transition-property: common;
      --transition-duration: var(--inkeep-durations-normal);
      transition-duration: var(--inkeep-durations-normal);
      --input-focus-border-color: var(--inkeep-colors-blue-500);
      --input-error-border-color: var(--inkeep-colors-red-500);
      padding-block: var(--inkeep-spacing-2);
      min-height: var(--inkeep-sizes-20);
      line-height: var(--inkeep-line-heights-short);
      vertical-align: top;
        }
      .inkeep-textarea:is(:disabled, [disabled], [data-disabled]) {
        opacity: 0.4;
        cursor: not-allowed;
            }
      .dark .inkeep-textarea, [data-theme="dark"] .inkeep-textarea {
        --input-focus-border-color: var(--inkeep-colors-blue-300)
    ;
        --input-error-border-color: var(--inkeep-colors-red-300)
    ;
            }
    .inkeep-btn {
      line-height: 1.2;
      border-radius: var(--inkeep-radii-md);
      font-weight: var(--inkeep-font-weights-semibold);
      --transition-prop: common;
      transition-property: common;
      --transition-duration: var(--inkeep-durations-normal);
      transition-duration: var(--inkeep-durations-normal);
      display: inline-flex;
      appearance: none;
      -webkit-appearance: none;
      align-items: center;
      justify-content: center;
      -webkit-user-select: none;
      user-select: none;
      position: relative;
      white-space: nowrap;
      vertical-align: middle;
      outline: var(--inkeep-borders-none);
        }
    }

  @layer _base {
      .inkeep-btn:is(:disabled, [disabled], [data-disabled]) {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: var(--inkeep-shadows-none);
            }
      .inkeep-btn:is(:focus-visible, [data-focus-visible]) {
        box-shadow: var(--inkeep-shadows-outline);
            }
      .inkeep-btn:is(:focus, [data-focus]) {
        z-index: 1;
            }
      .inkeep-btn:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
        background: initial;
            }
    }
}

@layer recipes.slots {

  .inkeep-input__group--size_md,.inkeep-input__field--size_md {
    --input-font-size: var(--inkeep-font-sizes-md);
    --input-padding: var(--inkeep-space-4);
    --input-border-radius: var(--inkeep-radii-md);
    --input-height: var(--inkeep-sizes-10);
    }

  .inkeep-input__field--variant_outline {
    border: 1px solid;
    border-color: inherit;
    background: inherit;
    }
    .inkeep-input__field--variant_outline:is(:read-only, [data-read-only]) {
      box-shadow: var(--inkeep-shadows-none) !important;
      -webkit-user-select: all;
      user-select: all;
        }
    .inkeep-input__field--variant_outline:is(:invalid, [data-invalid]) {
      border-color: var(--input-error-border-color);
      box-shadow: 0 0 0 1px var(--input-error-border-color);
        }
    .inkeep-input__field--variant_outline:is(:focus-visible, [data-focus-visible]) {
      z-index: 1;
      border-color: var(--input-focus-border-color);
      box-shadow: 0 0 0 1px var(--input-focus-border-color);
        }
    .inkeep-input__field--variant_outline:is(:hover, [data-hover]) {
      border-color: var(--inkeep-colors-gray-300);
        }
    .dark .inkeep-input__field--variant_outline:is(:hover, [data-hover]), [data-theme="dark"] .inkeep-input__field--variant_outline:is(:hover, [data-hover]) {
      border-color: var(--inkeep-colors-white-alpha-400);
        }

  .inkeep-input__addon--size_md {
    --input-font-size: var(--inkeep-font-sizes-md);
    --input-padding: var(--inkeep-space-4);
    --input-border-radius: var(--inkeep-radii-md);
    --input-height: var(--inkeep-sizes-10);
    }

  .inkeep-input__addon--variant_outline {
    border: 1px solid;
    border-color: inherit;
    background: var(--inkeep-colors-gray-100);
    }
    .dark .inkeep-input__addon--variant_outline, [data-theme="dark"] .inkeep-input__addon--variant_outline {
      border-color: var(--inkeep-colors-white-alpha-50);
      background: var(--inkeep-colors-white-alpha-300);
        }

  @layer _base {
    .inkeep-input__field {
      height: var(--input-height);
      font-size: var(--input-font-size);
      padding-inline: var(--input-padding);
      border-radius: var(--input-border-radius);
      width: 100%;
      min-width: var(--inkeep-sizes-0);
      outline: 0;
      position: relative;
      appearance: none;
      -webkit-appearance: none;
      --transition-prop: common;
      transition-property: common;
      --transition-duration: var(--inkeep-durations-normal);
      transition-duration: var(--inkeep-durations-normal);
      --input-focus-border-color: var(--inkeep-colors-blue-500);
      --input-error-border-color: var(--inkeep-colors-red-500);
        }
      .inkeep-input__field:is(:disabled, [disabled], [data-disabled]) {
        opacity: 0.4;
        cursor: not-allowed;
            }
      .dark .inkeep-input__field, [data-theme="dark"] .inkeep-input__field {
        --input-focus-border-color: var(--inkeep-colors-blue-300)
    ;
        --input-error-border-color: var(--inkeep-colors-red-300)
    ;
            }
    .inkeep-input__addon {
      height: var(--input-height);
      font-size: var(--input-font-size);
      padding-inline: var(--input-padding);
      border-radius: var(--input-border-radius);
        }
      .inkeep-input__addon + input {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
            }
    }
}