@layer utilities {

  .inkeep-max-w_480px {
    max-width: 480px
    }

  .inkeep-pos_relative {
    position: relative
    }

  .inkeep-top_5\% {
    top: 5%
    }

  .inkeep-pl_10 {
    padding-left: var(--inkeep-spacing-10)
    }
    .dark .dark\:inkeep-text_whiteAlpha\.500, [data-theme="dark"] .dark\:inkeep-text_whiteAlpha\.500 {
      color: var(--inkeep-colors-white-alpha-500)
        }
    .light .light\:inkeep-text_gray\.600, [data-theme="light"] .light\:inkeep-text_gray\.600 {
      color: var(--inkeep-colors-gray-600)
        }

  .inkeep-p_0 {
    padding: var(--inkeep-spacing-0)
    }

  .inkeep-w_5 {
    width: var(--inkeep-sizes-5)
    }

  .inkeep-h_5 {
    height: var(--inkeep-sizes-5)
    }
}

@layer recipes.slots {
  .inkeep-modal__container--scrollOverflowBehavior_outside {
    overflow: auto
    }

  .inkeep-modal__container--isCentered_false {
    align-items: flex-start
    }

  .inkeep-modal__content--size_md {
    max-width: var(--inkeep-sizes-md)
    }

  .inkeep-modal__content--isCentered_false {
    margin-block: var(--inkeep-spacing-16)
    }

  @layer _base {
    .inkeep-modal__backdrop {
      background: var(--inkeep-colors-black-alpha-600);
      z-index: var(--inkeep-z-index-modal);
      position: fixed;
      left: var(--inkeep-spacing-0);
      top: var(--inkeep-spacing-0);
      width: 100vw;
      height: 100vh;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
        }
      .light .inkeep-modal__backdrop, [data-theme="light"] .inkeep-modal__backdrop {
        background-color: rgb(104 112 118 / 50%)
            }
      .dark .inkeep-modal__backdrop, [data-theme="dark"] .inkeep-modal__backdrop {
        background-color: rgb(136 144 150 / 50%)
            }
      .inkeep-modal__backdrop:is([open], [data-open], [data-state="open"]) {
        animation: var(--inkeep-animations-backdrop-in)
            }
      .inkeep-modal__backdrop:is([data-state=closed]) {
        animation: var(--inkeep-animations-backdrop-out)
            }

    .inkeep-icon {
      width: 1em;
      height: 1em;
      display: inline-block;
      line-height: 1em;
      flex-shrink: 0;
      color: currentColor;
      vertical-align: middle
        }
    .inkeep-modal__container {
      justify-content: center;
      overscroll-behavior-y: none;
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: var(--inkeep-spacing-0);
      top: var(--inkeep-spacing-0)
        }
    .inkeep-modal__container,.inkeep-modal__content {
      display: flex;
      z-index: var(--inkeep-z-index-modal);
        }
    .inkeep-modal__content {
      flex-direction: column;
      position: relative;
      width: 100%;
      outline: 0;
      border-radius: var(--inkeep-radii-md);
      color: inherit;
      --modal-bg: var(--inkeep-colors-white);
      --modal-shadow: var(--inkeep-shadows-lg);
      background: var(--modal-bg);
      box-shadow: var(--modal-shadow);
      padding-inline: var(--inkeep-spacing-6);
      padding-block: var(--inkeep-spacing-2);
      flex: 1 1 0%;
        }
      .dark .inkeep-modal__content, [data-theme="dark"] .inkeep-modal__content {
        --modal-bg: var(--inkeep-colors-gray-700)
    ;
        --modal-shadow: var(--inkeep-shadows-dark-lg)
    ;
        background: var(--inkeep-colors-gray-dark-900)
            }
    }

  @layer _base {
      .inkeep-modal__content:is([open], [data-open], [data-state="open"]) {
        animation: var(--inkeep-animations-backdrop-in)
            }
      .inkeep-modal__content:is([data-state=closed]) {
        animation: var(--inkeep-animations-backdrop-out)
            }
    }

  @layer _base {
    .inkeep-modal__title {
      padding-inline: var(--inkeep-spacing-6);
      padding-block: var(--inkeep-spacing-4);
      font-size: var(--inkeep-font-sizes-xl);
      font-weight: var(--inkeep-font-weights-semibold);
      flex: 0
        }
    .inkeep-modal__description {
      padding-inline: var(--inkeep-spacing-6);
      padding-block: var(--inkeep-spacing-2);
      flex: 1 1 0%
        }
    .inkeep-modal__closeTrigger {
      position: absolute;
      top: var(--inkeep-spacing-2);
      inset-inline-end: var(--inkeep-spacing-3)
        }
    .inkeep-modal__footer {
      padding-inline: var(--inkeep-spacing-6);
      padding-block: var(--inkeep-spacing-4);
      display: flex;
      align-items: center;
      justify-content: flex-end
        }
    }
}