.btn {
    font-size: var(--size-18px) !important;
    display: flex;
    width: var(--size-246px);
    height: var(--size-60px);
    padding: 0 0.5rem;
    justify-content: center;
    align-items: center;
    gap: var(--size-10px);
    flex-shrink: 0;
    margin: auto;
}

.btn-primary {
    background-color: var(--terracotta);
    border: var(--terracotta);
    color: var(--white);
    border-radius: 1rem;
    font-size: 1.5rem;
    margin: 0.5rem;
    padding: 1rem 2rem;

    &.reverse {
        background-color: var(--white);
        border: var(--white);
        color: var(--terracotta);

        &:hover {
            background-color: var(--terracotta);
            border: var(--terracotta);
            color: var(--white);
        }
    }

    &:hover {
        background-color: var(--white);
        border: var(--white);
        color: var(--terracotta);
    }
}

.btn-dual {
    width: fit-content;
    gap: 0;

    &.green {
        color: var(--green);

        svg path {
            fill: var(--green);
        }
    }

    &.pink {
        color: var(--pink);

        svg path {
            fill: var(--pink);
        }
    }

    &.terracotta {
        color: var(--terracotta);

        svg path {
            fill: var(--terracotta);
        }
    }

    div {
        border-radius: 1rem; /* 16px */
        height: 100%;
        background-color: var(--white);

        &.icon {
            width: 3.75rem; /* 60px */
            height: 3.75rem;

            svg {
                width: 100%;
                height: 100%;
            }
        }
    }

    &.reverse {
        color: var(--white);

        svg path {
            fill: var(--white);
        }

        &.terracotta div {
            background-color: var(--terracotta);
        }

        &.pink div {
            background-color: var(--pink);
        }

        &.green div {
            background-color: var(--green);
        }
    }
}