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

    &:disabled {
        cursor: not-allowed;
    }

    &.btn-secondary {
        &:not(:disabled) {
            background-color: var(--slate-200);

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

        &:disabled {
            color: var(--slate-500);
            background-color: var(--slate-100);
        }
    }

    &.btn-info {
        &:not(:disabled) {
            background-color: var(--slate-200);

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

    &.btn-danger {
        &:not(:disabled) {
            background-color: var(--slate-200);

            &:hover,
            &:focus-visible {
                color: var(--white);
                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: rgba(0, 0, 0, 0.15) 0 .2rem .3rem;
    }
}