.button {
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 0.5rem 0;
    border-radius: var(--bdr-rounded);

    color: var(--clr-btn-text);

    background-color: var(--clr-btn-bg);
    box-shadow: var(--shadow-mid);

    transition: var(--transition-easeinout-fast);

    &:hover {
        transform: translateY(-1px);
        background-color: var(--clr-btn-bg-hover);
        box-shadow: var(--shadow-high);
    }

    &:active {
        transform: translateY(1px);
        background-color: var(--clr-btn-bg-active);
        box-shadow: var(--shadow-low);
    }

    &.button-slim {
        width: fit-content;
        padding: 0.5rem 2rem;
    }
}