div.button-stack {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    max-width: 75%;
    justify-content: center;

    @media (max-width: 750px) {
        max-width: unset;
    }

    a {
        text-decoration: none;
        color: var(--text);
    }
}

div.button {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary);
    border-radius: 10px;
    transition: 0.1s ease-in-out;
    cursor: default;

    &.link {
        cursor: pointer;
    }

    &:active {
        transform: scale(0.9);
    }

    img {
        max-width: 20px;
        max-height: 20px;
        transition: filter 0.1s;
    }

    &:not(.noeffects) img {
        filter: var(--dark-invert);
    }

    &:not(.noeffects):hover,
    &.primary {
        background: var(--text);
        color: var(--secondary);
        box-shadow: 0 0 5px var(--text);

        img {
            filter: var(--light-invert);
        }
    }

    &:not(.noeffects).primary:hover {
        background: transparent;
        color: var(--text);

        img {
            filter: var(--dark-invert);
        }
    }

    &.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
}