.button {
    font-size: var(--font-size-m);
    padding: min(0.65vw, 0.7rem) var(--space-m-x);
    border-radius: var(--border-radius-button);
    background-color: var(--color-brand);
    color: var(--color-text);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    &:hover {
        scale: 0.98;
        background-color: color-mix(in srgb, var(--color-brand) 80%, black);
        color: var(--color-text);
    }

    &:active {
        background-color: color-mix(in srgb, var(--color-brand) 90%, white);
        scale: 0.9;
    }

    &--transparent {
        background-color: transparent;
        color: var(--color-text);
        border: 1px solid var(--color-text);
        transition: all 0.2s ease-in-out;

        &:hover {
            color: var(--background-color);
            background-color: color-mix(in srgb, var(--color-text) 80%, black);
        }
    }
}