@layer components {
    .btn {
        --btn-background: var(--color-darker);
        --btn-color: black;
        --btn-hover-brightness: 0.9;

        border-radius: 4rem;
        background-color: var(--btn-background);
        color: var(--btn-color);
        cursor: pointer;
        display: inline-flex;
        font-size: 1em;
        font-weight: bold;
        padding: 0.5em 1.1em;
        pointer-events: auto;
        position: relative;
        text-decoration: none;

        @media (any-hover: hover) {
            &:hover {
                filter: brightness(var(--btn-hover-brightness));
            }
        }

        @media (prefers-color-scheme: dark) {
            & {
                --btn-hover-brightness: 1.25;
            }
        }

        &[disabled],
        &:has([disabled]),
        [disabled] &[type=submit],
        &[type=submit]:disabled {
            cursor: not-allowed;
            opacity: 0.3;
            pointer-events: none;
        }


    }

    .btn--link {
        --btn-background: var(--color-primary);
        --btn-color: var(--color-base-50);
    }
}