#theme-switch-wrapper {
    margin-left: 24px;
    margin-right: 34px;
}


/* 
    Bugfix: Visible slider checkbox
    Reason for usage of "scale" instead of "display:none":
        If you set checkbox -> "display:none;", then
        switch is not perfectly aligned with other header-buttons.
*/
#theme-switch-wrapper input {
    transform: scale(0.0);
}


#theme-switch {
    position: relative;
    display: inline-block;
    height: 30px;
    width: 60px;
}

#theme-slider {
    /* 
      Fixed / Specific font-size to avoid incorrect
      placement of switch symbol (e. g. when the
      root font size is adjusted).
    */
    font-size: 16px;


    background-color: var(--md-sys-color-secondary);
    border-radius: 34px;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}



/* 
  ========================================================================
  ============================== Switch: OFF =============================
  ======================================================================== 
*/
#theme-slider::before {
    content: "🌞";
    background-color: var(--md-sys-color-on-secondary);
    border-radius: 34px;
    position: absolute;
    height: 22px;
    width: 22px;
    bottom: 4px;
    left: 4px;
    transition: 0.5s;
}



/* 
  ========================================================================
  ============================== Switch: ON ==============================
  ======================================================================== 
*/
input:checked+#theme-slider {
    background-color: var(--md-sys-color-on-primary-container);
}

input:checked+#theme-slider::before {
    content: "🌛";
    left: 34px;
    transition: 0.5s;
}