.button {
    all: unset;
    color: white;
    background-color: var(--wenbun-blue);
    border-radius: 0.5em;
    font-size: 0.9em;
    padding: 0.5em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &.danger-button {
        background-color: var(--wenbun-red);
    }
    &.invert {
        border: var(--wenbun-blue) solid 1px;
        background-color: #FFFFFF90;
        color: var(--wenbun-blue);
        &:hover {
            background-color: lightgray;
        }
    }
    &:hover {
        opacity: 0.8;
    }
    &.disabled,
    &:disabled {
        background-color: gray !important;
        pointer-events: none;
    }
}

input:invalid,
input.invalid {
    background-color: var(--wenbun-red);
}