button.btn {
    width: fit-content;
    padding: calc(var(--gutter-width) * 0.75) calc(var(--gutter-width));

    border-width: var(--button-border-width);
    border-style: solid;
    border-radius: var(--border-radius);

    font-weight: bold;
    text-decoration: none;

    cursor: pointer;

    transition: all var(--animation-duration) var(--animation-timing);

    i {
        font-size: calc(var(--font-size-base) * 1.25);
    }

    &:has(i) {
        display: inline-flex;
        align-items: center;
    }

    &:has(span) {
        i {
            &.before {
                margin-right: 0.33rem;
            }
            &.after {
                margin-left: 0.33rem;
            }
        }
    }

    &.btn--primary {
        background: var(--primary);
        border-color: var(--primary);

        color: var(--white);

        &:hover {
            background: var(--white);
            color: var(--primary);
        }
    }
    &.btn--primary-outline {
        background: var(--white);
        border-color: var(--primary);
        color: var(--primary);
        &:hover {
            background: var(--primary);
            color: var(--white);
        }
    }
    &.btn--secondary {
        background: var(--secondary);
        border-color: var(--secondary);
        color: var(--white);
        &:hover {
            background: var(--white);
            color: var(--secondary);
        }
    }
    &.btn--secondary-outline {
        background: var(--white);
        border-color: var(--secondary);
        color: var(--secondary);
        &:hover {
            background: var(--secondary);
            color: var(--white);
        }
    }
    &.btn--grey {
        background: var(--grey-medium);
        border-color: var(--grey-medium);
        color: var(--primary);
        &:hover {
            border-color: var(--primary);
        }
    }
    &.btn--white {
        background: var(--white);
        border-color: var(--white);
        color: var(--primary);
        &:hover {
            border-color: var(--primary);
        }
    }
    &.btn--icon {
        padding: 0;

        background: transparent;
        border-color: transparent;
        color: var(--primary);
        i {
            font-size: calc(var(--font-size-base) * 3);
            margin: 0;
        }
        &:hover {
            border-color: var(--primary);
        }
    }
}