/* color scheme */

/* theme light */
:root:not([theme=dark]),
[theme=light] {
  --text-color:black;
  --border-color: var(--text-color);
  --background-color: #EFEFEF;
}

/* theme dark */
@media only screen and (prefers-color-scheme:dark) {
  :root:not([theme=light]) {
    --text-color: #EFEFEF;
    --border-color: var(--text-color);
    --background-color: #121212;
  }
}

[theme=dark] {
  --text-color:#EFEFEF;
  --border-color:var(--text-color);
  --background-color: #121212;
}


/* switch */

.switch-container>span{
  display: block;
}

.switch-container>div{
  padding: 0;
  display: inline-flex;
  border: solid var(--button-border-width) var(--border-color);
}

.switch-container>div:hover,
.switch-container>div:focus-within{
  box-shadow: var(--focus-box-shadow);
}

.switch-container>div>label{
  padding: 0.4em;
  display: inline-block;
}

.switch-container>div>input[type="radio"]{
  position: absolute;
  left: -9999px;
}

.switch-container>div>label>svg{
  width: 1.4em;
  height: 1.4em;
  display: block;
}



/* active */

.switch-container>div>input[type="radio"]:checked+label {
  color: var(--background-color);
  background-color: var(--text-color);
  box-shadow: inset 0 0 0 2px var(--background-color);
}