@layer base {
    :where(form, .form):not(.undecorate) {
        display: flex;
        flex-direction: column;
        gap: var(--space-neutral);

        > :where(input, .input, textarea):not(.undecorate) {
            font-size: var(--font-size-small);
        }

        label {
            font-weight: 900;
            > * {
                font-weight: 500;
            }
        }
    }

    .form\/horizontal {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-small);
    }

    .form\/label-vertical {
        display: flex;
        flex-direction: column;

        > :where(input, .input, .form\/input, textarea):not(.undecorate) {
            margin-top: var(--space-xx-small);
        }
    }

    .form\/buttons-row, .form\/row {
        display: flex;
        flex-direction: row;
        gap: var(--space-small);
        align-items: center;
    }

    .form\/line-radio {
        display: flex;
        flex-direction: row;
        --line-padding: 3px;
        padding: var(--line-padding);
        gap: .5ch;
        width: fit-content;

        label {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 1px;
            cursor: pointer;
            padding-inline: 1.5ch;
            user-select: none;

            outline: 2px dashed var(--color-border);
            border-radius: calc(var(--border-radius) - var(--line-padding));

            &:has(input:checked) {
                box-shadow: var(--panel-shadow);
                outline: 1px solid oklch(80.9% 0.105 251.813);
                background: oklch(93.2% 0.032 255.585);
            }
            input[type="radio"] {
                appearance: none;
                height: 2em;
            }
        }
    }

    .form\/checkbox {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-small);
        cursor: pointer;
        padding: .5ch;
        width: fit-content;

        outline: 2px dashed var(--color-border);
        border-radius: var(--border-radius);

        &:has(input[type="checkbox"]:checked) {
            background: oklch(93.2% 0.032 255.585);
            outline: 1px solid oklch(80.9% 0.105 251.813);
        }

        input[type="checkbox"]:checked {
            border-color: oklch(80.9% 0.105 251.813);
            /* background: white; */
        }
    }

    fieldset:disabled {
        filter: grayscale(1);
        opacity: .6;
    }

    @keyframes flash {
        0% { opacity: .5; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { opacity: 0; }
    }

    .form\/button\/right {
        max-width: max-content;
        margin-left: auto;
    }

    button.success {
        --mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg>');
    }
    button.fail {
        --mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>');
    }

    button.success, button.fail {
        position: relative;
        &::before {
            position: absolute;
            opacity: 0;
            content: '';
            left: 1ch;
            width: 1.2em;
            height: 1.2em;
            mask-image: var(--mask-image);
            background: white;
            animation: flash 1s linear;
        }
    }

    button.fail {
        position: relative;
        &::before {
            position: absolute;
            opacity: 0;
            content: '';
            left: 1ch;
            width: 1.2em;
            height: 1.2em;
            mask-image: var(--mask-image);
            background: white;
            animation: flash 1s linear;
        }
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    button.htmx-request,
    form[aria-busy] button[type="submit"],
    form.htmx-request button[type="submit"] {
        position: relative;
        &::after {
            position: absolute;
            content: '';
            left: 1ch;
            width: 1.2em;
            height: 1.2em;
            mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M272 112C272 85.5 293.5 64 320 64C346.5 64 368 85.5 368 112C368 138.5 346.5 160 320 160C293.5 160 272 138.5 272 112zM272 528C272 501.5 293.5 480 320 480C346.5 480 368 501.5 368 528C368 554.5 346.5 576 320 576C293.5 576 272 554.5 272 528zM112 272C138.5 272 160 293.5 160 320C160 346.5 138.5 368 112 368C85.5 368 64 346.5 64 320C64 293.5 85.5 272 112 272zM480 320C480 293.5 501.5 272 528 272C554.5 272 576 293.5 576 320C576 346.5 554.5 368 528 368C501.5 368 480 346.5 480 320zM139 433.1C157.8 414.3 188.1 414.3 206.9 433.1C225.7 451.9 225.7 482.2 206.9 501C188.1 519.8 157.8 519.8 139 501C120.2 482.2 120.2 451.9 139 433.1zM139 139C157.8 120.2 188.1 120.2 206.9 139C225.7 157.8 225.7 188.1 206.9 206.9C188.1 225.7 157.8 225.7 139 206.9C120.2 188.1 120.2 157.8 139 139zM501 433.1C519.8 451.9 519.8 482.2 501 501C482.2 519.8 451.9 519.8 433.1 501C414.3 482.2 414.3 451.9 433.1 433.1C451.9 414.3 482.2 414.3 501 433.1z"/></svg>');
            background: white;
            animation: spin 1.5s linear infinite;
        }

        /* this is here to reset success animation or something so it would play again after second request */
        &.success, &.fail {
            position: relative;
            &::before {
                display: none;
            }
        }
    }

    :where(form, .form):not(.undecorate) {
        anchor-scope: all;
        anchor-name: --form;
    }

    .form\/error-popover {
        position: absolute;
        inset: unset;
        position-anchor: --form;
        top: anchor(top);
        right: anchor(right);
        left: anchor(left);
        margin: .5ch;

        border-radius: var(--border-radius);
        padding: 1ch;
        background: oklch(93.6% 0.032 17.717);
        border: var(--panel-border);
        border-color: oklch(80.8% 0.114 19.571);
        box-shadow: var(--panel-shadow);

        transition: transform linear 200ms;
        @starting-style {
            transform: scaleY(0);
        }

        display: flex;
        button {
            margin-left: auto;
        }
    }
}