/* Color */

body {
    --movim-background-main: 255, 255, 255;
    --movim-background: 238, 238, 238;
    --movim-gray: 35, 35, 35;
    --movim-font: 0, 0, 0;
    --movim-header-font: 200, 200, 200;
    --movim-element-action: 153, 153, 153;
    scrollbar-color: rgba(var(--movim-font), 0.2) transparent;
}

/* Night mode, using an enforced class and with the browser media-query, the two following
sections are therefore copy pasted */

body.nightmode {
    --movim-background-main: 20, 26, 33;
    --movim-background: 25, 32, 40;
    --movim-gray: var(--movim-background-main);
    --movim-font: 255, 255, 255;
    --movim-element-action: 74, 86, 99;
    scrollbar-color: rgba(var(--movim-font), 0.1) transparent;
}

@media (prefers-color-scheme: dark) {
    body {
        --movim-background-main: 20, 26, 33;
        --movim-background: 25, 32, 40;
        --movim-gray: var(--movim-background-main);
        --movim-font: 255, 255, 255;
        --movim-element-action: 74, 86, 99;
        scrollbar-color: rgba(var(--movim-font), 0.1) transparent;
    }
}

body > *,
.context_menu,
.icon-text,
.tabs a,
input, textarea, select {
    color: rgba(var(--movim-font), 0.87);
}

ul.list li.divided,
ul.list li.divided.spaced:after,
hr:not(.clear),
.card > .block:not(.subheader):not(.simple),
*.divided > *:not(:last-child),
*.divided.spaced > *:not(:last-child):after {
    border-color: rgba(var(--movim-font), 0.12);
}

ul.list li span.control.divided:before {
    border-color: rgba(var(--movim-font), 0.128);
}

label, span.info,
li div.bubble:after,
ul.list li>div>p>span.second,
table tr th {
    color: rgba(var(--movim-font), 0.54);
}

body,
#drawer .card > .block:not(.subheader):not(.simple):not(.color) {
    background-color: rgb(var(--movim-background));
}

.drawer,
ul li.date > div > p.normal,
.dialog, ul.context_menu,
.card > .block:not(.subheader):not(.simple):not(.color) {
    background-color: rgb(var(--movim-background-main));
}

main > header a,
.icon:not(.placeholder):not(.active) a,
.color input {
    color: white;
}

.button.color,
.color,
span.icon span.counter,
span.icon[data-counter]:after,
span.icon.composing:after,
form > div .checkbox > input[type="checkbox"]:checked:before,
form > div .radio > input[type="radio"]:checked + label {
    border-color: var(--movim-accent);
    background-color: var(--movim-accent);
    color: white;
}

span.icon span.counter:not(.alt) {
    color: white;
}

span.icon span.counter.alt {
    color: var(--movim-font);
    background-color: rgb(var(--movim-background-main));
}

/* Elements */

ul li.action > div.action,
ul li.action > form > div.action,
.button.dorange,.icon.dorange  , span.resource.dorange  { color: var(--p-dorange) }
li div.bubble.moderator:after,
ul li div > p > span.moderator,
.button.orange, .icon.orange, span.resource.orange   { color: var(--p-orange); }
.button.amber,  .icon.anber , span.resource.amber    { color: var(--p-amber) }
.button.yellow, .icon.yellow, span.resource.yellow   { color: var(--p-yellow); }
.button.lime,   .icon.lime  , span.resource.lime     { color: var(--p-lime) }
.button.lgreen, .icon.lgreen, span.resource.lgreen   { color: var(--p-lgreen); }
.button.green,  .icon.green , span.resource.green    { color: var(--p-green); }
.button.teal,   .icon.teal  , span.resource.teal     { color: var(--p-teal) }
.button.cyan,   .icon.cyan  , span.resource.cyan     { color: var(--p-cyan) }
.button.lblue,  .icon.lblue  , span.resource.lblue   { color: var(--p-lblue) }
.button.blue,   .icon.blue  , span.resource.blue     { color: var(--p-blue); }
.button.red,    .icon.red   , span.resource.red, p.encrypted.error { color: var(--p-red); }
.button.indigo, .icon.indigo, span.resource.indigo   { color: var(--p-indigo); }
.button.dpurple,.icon.dpurple,span.resource.dpurple  { color: var(--p-dpurple); }
.button.purple, .icon.purple, span.resource.purple   { color: var(--p-purple); }
.button.pink,   .icon.pink  , span.resource.pink     { color: var(--p-pink) }
.button.black,  .icon.black , span.resource.black    { color: var(--p-black); }
.button.gray,   .icon.gray  , span.resource.gray     { color: var(--p-gray); }

.color          { color: white; background-color: var(--movim-accent); border-color: var(--movim-accent) }
.color.gray     { color: white; background-color: var(--p-gray); border-color: var(--p-gray) }
.color.dorange  { color: white; background-color: var(--p-dorange); border-color: var(--p-dorange) }
.color.orange   { color: white; background-color: var(--p-orange); border-color: var(--p-orange) }
.color.amber    { color: white; background-color: var(--p-amber); border-color: var(--p-amber) }
span.icon:not(.composing):not([data-counter]):not(.story).status.away:after,
.color.yellow   { color: white; background-color: var(--p-yellow); border-color: var(--p-yellow) }
.color.lime     { color: white; background-color: var(--p-lime); border-color: var(--p-lime) }
span.icon:not(.composing):not([data-counter]):not(.story).status.chat:after,
span.icon:not(.composing):not([data-counter]):not(.story).status.online:after,
.color.lgreen   { color: white; background-color: var(--p-lgreen); border-color: var(--p-lgreen) }
.color.green    { color: white; background-color: var(--p-green); border-color: var(--p-green) }
.color.teal     { color: white; background-color: var(--p-teal); border-color: var(--p-teal) }
.color.cyan     { color: white; background-color: var(--p-cyan); border-color: var(--p-cyan) }
.color.lblue    { color: white; background-color: var(--p-lblue); border-color: var(--p-lblue) }
.color.blue     { color: white; background-color: var(--p-blue); border-color: var(--p-blue) }
span.icon:not(.composing):not([data-counter]):not(.story).status.server_error:after,
.color.indigo   { color: white; background-color: var(--p-indigo); border-color: var(--p-indigo) }
.color.dpurple  { color: white; background-color: var(--p-dpurple); border-color: var(--p-dpurple) }
span.icon:not(.composing):not([data-counter]):not(.story).status.xa:after,
.color.purple   { color: white; background-color: var(--p-purple); border-color: var(--p-purple) }
.color.pink     { color: white; background-color: var(--p-pink); border-color: var(--p-pink) }
span.icon:not(.composing):not([data-counter]):not(.story).status.dnd:after,
.color.red      { color: white; background-color: var(--p-red); border-color: var(--p-red) }
.color.black    { color: white; background-color: var(--p-black); border-color: var(--p-black) }

.color.none { color: white; background-color: transparent; }
.color.transparent { color: white; backdrop-filter: blur(1rem); background-color: rgba(0, 0, 0, 0.25); }
.color.semi { color: rgba(var(--movim-font), 0.87); background-color: rgba(var(--movim-background-main), 0.75); }

form > div > input:focus:invalid,
form > div > input:focus:required {
    box-shadow: 0px 2px 0px var(--p-red);
}

form > div > input:invalid,
form input:focus:invalid + label,
form textarea:focus:invalid + label {
    color: var(--p-red);
}

ul.list li > div > p:not(:first-of-type):not(.normal):not(.main) {
    color: rgba(var(--movim-font), 0.6);
}

header.big ul.list li > div > p:not(:first-of-type):not(.normal):not(.main),
div.snackbar ul.list li > div > p:not(:first-of-type):not(.normal):not(.main) {
    color: rgb(var(--movim-header-font));
}

header.big ul.list li>div>p>span.second {
    color: rgba(var(--movim-header-font), 0.9);
}

/* Default color : indigo */

input[type=button].color,
header.big,
main > header {
    background-color: var(--movim-accent);
    border-color: var(--movim-accent);
}

/* Accent color */

.tabs,
.button,
header:not(.big) .icon a,
a {
    color: var(--movim-accent);
    border-color: var(--movim-accent);
}

form > div .checkbox:before { background-color: var(--movim-accent); }

form input:focus:not(:invalid) + label,
form textarea:focus:not(:invalid) + label {
    color: var(--movim-accent);
}

form input:focus:not(:invalid):not(.button),
form textarea:focus:not(:invalid):not(.button) {
    box-shadow: 0px 2px 0px var(--movim-accent);
}