/* color scheme styles */
.color-scheme-container{
  position:relative;
}
.color-scheme-icons-container{
  position:relative;
  width:70px;
  margin-bottom:10px;
}
.color-indicator-knob{
  position:absolute;
  z-index:1;
  top:50%;
  transform:translateY(-50%);
  left:0;
  background-color:var(--accent);
  border-radius:50%;
  height:24px;
  width:24px;
  transition:left .25s;
}
[data-color-scheme="light"] .color-indicator-knob{
  left:calc(0% - 4px);
}
[data-color-scheme="dark"] .color-indicator-knob{
  left:calc(50%);
  transform:translate(-50%, -50%);
}
[data-color-scheme="system"] .color-indicator-knob{
  left:calc(100% - 20px);
}
.color-scheme-icon{
  cursor:pointer;
  z-index:2;
  font-size:16px;
  transition:color .25s;
}
.selected.color-scheme-icon{
  color:var(--white);
}
.color-scheme-label-container{
  position:relative;
  height:20px;
}
.color-scheme-label{
  position:absolute;
  left:0;
  opacity:0;
  transition:.15s;
}
.selected.color-scheme-label{
  opacity:1;
}


/* +++++++++++++++++++++++++++++++++++++++++++ */


/* responsive styles */

.color-scheme-icons-container{
  margin-top:4px;
}