.Button {
    --padding: .2rem;
    --background: var(--color-main);
    --color: var(--color-white);
    --background-hover: var(--color-main-dark);

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: var(--transition-default);
    outline: none;
    border: none;
    background: transparent;
    color: var(--color);

    &.cta {
        background: var(--background);
        color: var(--color);
        padding: .5rem 1.5rem;
        border-radius: var(--radius-default);
        box-shadow: var(--box-shadow-z2);

        &:hover {
            background: var(--background-hover);
        }
    }

    &.cta.white {
        --background: var(--color-white);
        --color: var(--color-main);
        --background-hover: var(--color-grey);
    }

    &.icon-button {
        display: flex;
        padding: var(--padding);
        border-radius: 100%;

        &:hover {
            scale: 1.2;
        }
    }

    &.mini-button {
        padding: .5rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;

        & > .icon {
            font-size: 1.5rem;
        }

        & > span {
            font-size: .8rem;
        }
    }
}