.Button {
    --padding: var(--padding-xs);
    --background: var(--color-main-dark);
    --color: var(--color-lightest);
    --background-hover: var(--color-main-dark);

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

    &.transparent {
        --background: transparent;
        box-shadow: none;
        padding: var(--padding-s) var(--padding-l);
        border-radius: var(--radius-default);
    }

    &.raised {
        box-shadow: var(--box-shadow-z2);
        padding: var(--padding-s) var(--padding-l);
        border-radius: var(--radius-default);

        &.danger {
            --background: var(--color-error);
            --color: var(--color-lightest);
        }
    }

    &.text {
        --background: transparent;
        --color: var(--color-darkest);
        padding: var(--padding-s) var(--padding-l);
        border-radius: var(--radius-default);

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

        &.white {
            --color: var(--color-lightest);
        }

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

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

    &.round {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        padding: var(--padding-s);
    }

    &.cta {
        background: var(--background);
        color: var(--color);
        padding: var(--padding-s) var(--padding-l);
        border-radius: var(--radius-default);
        box-shadow: var(--box-shadow-z2);

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

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

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

        &:hover {
            scale: 1.2;
        }
    }

    &.search-button {
        --background: var(--color-lightest);
        --color: var(--color-main-darkest);
        border-radius: 100%;
        padding: var(--padding);
        font-size: var(--font-size-l);

        &:hover {
            scale: 1.2;
        }
    }

    &.mini-button {
        padding: var(--padding-s) var(--padding-l);
        display: flex;
        flex-direction: column;
        gap: var(--padding-xs);

        & > .icon {
            font-size: var(--font-size-xl);
        }

        & > span {
            font-size: var(--font-size-s);
        }
    }
}