.btn {
    padding: .3rem .7rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .9em;
    font-weight: 500;
    color: var(--foreground);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition-property: color, background-color, border-color;
    transition-duration: .2s;
    transition-timing-function: var(--timing-function);

    &:disabled {
        cursor: not-allowed;
    }

    &.btn-secondary {
        &:not(:disabled) {
            background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));

            &:hover,
            &:focus-visible {
                color: var(--background);
                background-color: var(--accent);
            }
        }

        &:disabled {
            color: color-mix(in srgb, var(--foreground) 50%, var(--background));
            background-color: color-mix(in srgb, var(--foreground) 10%, var(--background));
        }
    }

    &.btn-info {
        &:not(:disabled) {
            background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));

            &:hover,
            &:focus-visible {
                color: var(--background);
                background-color: var(--accent);
            }
        }
    }

    &.btn-danger {
        &:not(:disabled) {
            background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));

            &:hover,
            &:focus-visible {
                color: var(--background);
                background-color: var(--red-500);
            }
        }
    }

    &.btn-icon {
        width: 1.75rem;
        padding: 0;
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        border-radius: 50%;

        &.btn-sm {
            font-size: .85em;
            width: 1.5rem;
        }

        .icon {
            width: 1em;
        }
    }

    &.btn-shadow {
        box-shadow: var(--shadow);
    }
}

.btn-round {
    display: grid;
    place-items: center;
    height: 45px;
    aspect-ratio: 1;
    background-color: var(--background);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 100vmax;
    pointer-events: all;
    cursor: pointer;
    outline: .2rem solid transparent;
    transition-property: color, background-color, border-color, outline-color;
    transition-duration: .15s;
    transition-timing-function: var(--timing-function);

    svg {
        fill: var(--foreground);
        width: 1.15em;
        transition-property: fill;
        transition-duration: .15s;
        transition-timing-function: var(--timing-function);
    }

    &:hover,
    &:focus-visible {
        outline-color: color-mix(in srgb, var(--accent) 20%, transparent);
        border-color: var(--accent);
        
        svg {
            fill: var(--accent);
        }
    }

    &.active {
        color: var(--background);
        background-color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 75%, var(--background));

        svg {
            fill: var(--background);
        }
    }
}