@layer components {

    .notify {
        display: grid;
        gap: var(--s-4);
        padding: var(--s-5);
        border: 1px solid var(--c-line);
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .notify[hidden] {
        display: none;
    }

    .notify__title,
    .notify__done-title {
        font-size: var(--t-md);
        font-weight: 500;
    }

    .notify__title:focus-visible {
        outline: 2px solid var(--c-ink);
        outline-offset: 4px;
    }

    .notify__form {
        display: grid;
        gap: var(--s-4);
    }

    .notify__form[hidden],
    .notify__done[hidden] {
        display: none;
    }

}