:is(button, .button) {
    background-color: var(--color-blue);
    color: white;
    border-radius: var(--u);
    height: var(--u-sm);
    padding: 0 var(--u-2xs);
    width: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    transition: transform 0.1s;
    cursor: pointer;
    gap: 1rem;
    flex-shrink: 0;
    transform-origin: center center;
}

button {
    font-family: "VAG Rounded Bold", "VAG Rounded Next", system-ui;
}

:is(button, .button).icon {
    font-family: "Material Symbols Rounded";
}

:is(button, .button).round {
    border-radius: 50%;
    aspect-ratio: 1;
    padding: 0;
}

:is(button, .button):active {
    transform: scale(0.98);
}

:is(button, .button).xs {
    height: var(--u-xs);
    padding: 0 var(--u-3xs);
    font-size: 1rem;
}

:is(button, .button).green {
    background-color: var(--color-green);
    color: white;
}

:is(button, .button).white {
    background-color: white;
    color: var(--color-black);
}

:is(button, .button).lightgreen {
    background-color: var(--color-green-xs);
    color: var(--color-green);
}

:is(button, .button).limegreen {
    background-color: var(--color-lime);
    color: white;
}

:is(button, .button).orange {
    background-color: var(--color-orange);
}

:is(button, .button).lightorange {
    background-color: var(--color-orange-light);
    color: var(--color-orange);
}

:is(button, .button).gray {
    background-color: #eee;
    color: var(--color-black);
}

:is(button, .button).lightgray {
    background-color: #eee;
    color: #94a3b8;
}

:is(button, .button).red {
    background-color: var(--color-red);
}

:is(button, .button).transparent {
    background-color: transparent;
}

:is(button, .button).dashed {
    background-color: transparent;
    color: var(--color-black);
    border: dashed 2px var(--color-gray);
}

:is(button, .button).link {
    background-color: transparent;
    color: var(--color-green);
}

:is(button, .button).border {
    background-color: transparent;
    color: var(--color-black);
    border: solid 1px #ddd;
}

:is(button, .button).table-row {
    height: calc(var(--u-xs) * 1.25);
    width: calc(var(--u-xs) * 1.25);
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 0;
}

:is(button, .button).gray-on-gray {
    background-color: rgba(0, 0, 0, 0.05);
    color: rgb(102, 102, 102);
}

:is(button, .button).white-on-blue {
    background-color: var(--color-blue);
    color: white;
}

:is(button, .button).white-on-green {
    background-color: var(--color-green);
    color: white;
}

:is(button, .button).black {
    background-color: var(--color-black);
    color: white;
}

:is(button, .button) > i {
    font-size: 1.5rem;
}

:is(button, .button):disabled {
    opacity: 0.5;
    cursor: auto;
}

:is(button, .button):disabled > i {
    opacity: 0.5;
    cursor: auto;
}

:is(button, .button):disabled:active {
    transform: none;
}

:is(i, .icon).green-on-transparent {
    background-color: transparent;
    color: var(--color-green);
    border: solid 2px var(--color-green);
}