.btn {
    padding: .5lh 1lh;
    border: none;
    border-radius: .5lh;

    --btn-color: var(--fg-color);
    /* color: var(--text-color); */
    background-color: var(--btn-color);

    font-weight: bold;
    font-size: 1rem;

    --transition-duration-short: 50ms;
    --transition-duration-medium: 100ms;
    --transition-duration-long: 200ms;
    --transition-duration-bg-color: var(--transition-duration-medium);
    --transition-duration-filter: var(--transition-duration-long);
    --transition-duration-outline: var(--transition-duration-medium);
    transition:
        background-color ease-out var(--transition-duration-bg-color),
        filter ease-out var(--transition-duration-filter),
        outline ease-in var(--transition-duration-outline);

    --drop-shadow-opacity: .5;
    --drop-shadow-offset-y: 0;
    --drop-shadow-blur: .25rem;
    filter: var(--filter);
    --filter:
        brightness(var(--brightness, 1))
        grayscale(var(--grayscale, 0));
    cursor: pointer;

    &:not(.flat) {
        --drop-shadow: drop-shadow(
            rgba(0, 0, 0, var(--drop-shadow-opacity))
            0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
        );

        @supports (color: rgb(from black r g b / 0.5)) {
            --drop-shadow: drop-shadow(
                rgba(from var(--bg-color) r g b / var(--drop-shadow-opacity))
                0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
            );
        }

        filter: var(--filter) var(--drop-shadow);
    }

    &:not(:disabled):not(.flat):hover {
        background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
        --drop-shadow-opacity: .8;
        --drop-shadow-offset-y: .25rem;
        --drop-shadow-blur: .4rem;
    }

    &:where(:disabled) {
        --brightness: .5;
        --grayscale: .5;
    }

    &.suggested:not(.destructive) {
        --btn-color: var(--accent-color);
    }

    &.destructive:not(.suggested) {
        --btn-color: #861c1c;
    }

    &:focus-visible {
        outline-offset: 2px;
    }

    &.icon {
        --text-color: transparent;
        background: var(--icon-url) no-repeat;
        background-size: contain;
        overflow: hidden;
        width: var(--icon-size, 1rem);
        height: var(--icon-size, 1rem);
    }

    &.flat {
        border-radius: 0;
        padding: 0;
        --transition-duration-filter: var(--transition-duration-short);

        &:not(:disabled) {
            &:hover, &:focus-visible {
                --brightness: 1.5;
            }

            &:active {
                --brightness: 1.75;
            }
        }
    }

    /*
        This class is just a hint, so this is on a best-effort basis.
        If it works, it works, if not, then not.
    */
    &.full-width {
        width: -moz-available;
        width: -webkit-fill-available;
    }
}