.btn {
    display: flex;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    color: var(--dark-green);
    font-size: 2rem;

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

.btn-primary {
    background-color: var(--dark-green);
    border: 1px solid var(--dark-green);
    color: var(--white);

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

    &:hover, &.reverse {
        background-color: var(--white);
        border: 1px solid var(--dark-green);
        color: var(--dark-green);

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

.btn-secondary {
    background-color: var(--white);
    border: transparent;
    color: var(--dark-green);

    &:hover, &.reverse {
        background-color: transparent;
        color: var(--white);
    }
}

.btn-tertiary {
    background-color: var(--pink);
    border: transparent;
    color: var(--white);

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

    &:hover, &.reverse {
        background-color: transparent;
        border: var(--pink);
        color: var(--pink);

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

.btn-quaternary {
    background: var(--blur);
    border: transparent;
    color: var(--white);
    backdrop-filter: blur(8px);

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

.btn-quinary {
    background-color: var(--background-green);
    border: 1px solid var(--background-green);
    color: var(--dark-green);

    &:hover, &.reverse {
        background-color: var(--dark-green);
        border: 1px solid var(--dark-green);
        color: var(--white);
    }
}