.bookmark-edit-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(90vw, 32rem);
    max-height: min(80vh, 600px);
    padding: calc(var(--spacing) * 3);
    border: none;
    border-radius: var(--radius);
    background: var(--page-bg);
    color: var(--primary-text);
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    opacity: 1;
    transform: scale(1) translateY(0);
    transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
        display 0.25s ease allow-discrete;

    @starting-style {
        opacity: 0;
        transform: scale(0.95) translateY(0.5rem);
    }

    &:popover-open {
        display: flex;
    }

    &::backdrop {
        background: hsl(from var(--primary) h s 3% / 0.2);
        backdrop-filter: blur(4px);
        transition:
            background 0.25s ease,
            backdrop-filter 0.25s ease,
            display 0.25s ease allow-discrete;

        @starting-style {
            background: hsl(from var(--primary) h s 3% / 0);
            backdrop-filter: blur(0);
        }
    }

    & > .button-ghost {
        align-self: flex-end;
    }

    & > div.title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: calc(var(--spacing) * 0.5);

        h2 {
            font-size: 1.25rem;
            font-weight: 700;
        }
    }
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);

    .input-group {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 0.5);

        label {
            font-size: 0.8rem;
            font-weight: 600;
            color: oklch(from var(--primary-text) l c h / 0.7);
        }

        input,
        textarea {
            width: 100%;
            padding: calc(var(--spacing) * 1);
            border: 1px solid oklch(from var(--primary-text) l c h / 0.15);
            border-radius: var(--radius);
            font-size: 0.9rem;
            font-family: inherit;
            color: var(--primary-text);
            background: transparent;
            outline: none;
            transition: all 0.15s ease;

            &::placeholder {
                color: oklch(from var(--primary-text) l c h / 0.3);
            }

            &:focus {
                border-color: var(--primary);
                box-shadow: 0 0 0 3px oklch(from var(--primary) l c h / 0.12);
            }

            &:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
        }

        textarea {
            resize: vertical;
            min-height: 5rem;
        }
    }

    button[type="submit"] {
        align-self: flex-end;
    }
}

.bookmark-edit-modal .error-message {
    margin-top: calc(var(--spacing) * 0.5);
    padding: calc(var(--spacing) * 1);
    background: oklch(0.65 0.25 25 / 0.08);
    border: 1px solid oklch(0.65 0.25 25 / 0.2);
    border-radius: var(--radius);
    color: oklch(0.5 0.2 25);
    font-size: 0.85rem;
}