/* Default: night mode */
:root {
    --community-bg: #171717;
    --community-text: #eeeeee;
    --community-input-bg: #252525;
    --community-border: #666666;
    --community-link: #a9cfff;
}

/* Day mode */
body.day-mode {
    --community-bg: #ffffff;
    --community-text: #111111;
    --community-input-bg: #ffffff;
    --community-border: #aaaaaa;
    --community-link: #1759a6;
}

/* Both widgets */
[data-content-rating],
[data-content-comments] {
    background-color: var(--community-bg);
    color: var(--community-text);
}

:is([data-content-rating], [data-content-comments])
:is(button, textarea, select, input:not([type="radio"]):not([type="checkbox"])) {
    background-color: var(--community-input-bg);
    color: var(--community-text);
    border: 1px solid var(--community-border);
}

:is([data-content-rating], [data-content-comments]) fieldset,
[data-content-comments] .comment-card {
    border-color: var(--community-border);
}

:is([data-content-rating], [data-content-comments]) a {
    color: var(--community-link);
}

:is([data-content-rating], [data-content-comments]) button:hover:not(:disabled) {
    border-color: var(--community-text);
}

button[data-subscriber-download] {
    background-color: var(--community-input-bg);
    color: var(--community-text);
    border: 1px solid var(--community-border);
    border-radius: 4px;
    padding: .55em 1em;
    margin: .3em .5em .3em 0;
    font: inherit;
    cursor: pointer;
}

button[data-subscriber-download]:hover:not(:disabled) {
    border-color: var(--community-text);
}

button[data-subscriber-download]:focus-visible {
    outline: 2px solid var(--community-link);
    outline-offset: 3px;
}

button[data-subscriber-download]:disabled {
    opacity: .5;
    cursor: default;
}