.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: var(--background);
    color: var(--color);

    &.raised {
        box-shadow: var(--box-shadow-z2);
        padding: .5em 1.5em;
        border-radius: var(--radius-default);
    }

    &.text {
        --background: transparent;
        --color: var(--color-black);
        padding: .5em 1.5em;
        border-radius: var(--radius-default);

        &:hover {
            --background: rgba(0, 0, 0, 0.05);
        }

        &.danger {
            --color: var(--color-red);

            &:hover {
                --background: rgba(255, 0, 0, 0.1);
            }
        }
    }

    &.round {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        padding: .5rem;
    }

    &.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;
        }
    }
}