button.input-button {
    cursor: pointer;
    border: var(--border-thickness) solid var(--background-primary);
    background-color: var(--background-tertiary);
    padding: 8px;
    width: 100%;
}

button.input-button.selected {
    background-color: var(--background-primary);
    color: var(--font-color-primary);
}

button.input-button:disabled {
    cursor: not-allowed;
}

button.input-button:not(.selected):not(.rainbow):disabled {
    opacity: 0.5;
    color: var(--font-color-secondary);
}

button.input-button:not(:disabled):hover,
button.input-button:not(:disabled):focus-visible {
    border-color: var(--background-highlight);
}

button.input-button.rainbow {
    position: relative;
    animation: rainbow-border 1s linear infinite;
    border: 2px solid transparent;
    background-clip: padding-box;
}

button.input-button.rainbow::before {
    position: absolute;
    z-index: -1;
    animation: input-button-rainbow-shift 1s linear infinite;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red);
    background-size: 200%;
    content: '';
}

@keyframes input-button-rainbow-shift {
    from {
        background-position: 0%;
    }

    to {
        background-position: 200%;
    }
}