@use '_global' as *;

.wp-dark-mode-switch-21 {
    
    @extend .wp-dark-mode-switch-normal;
    .theme-switch {
        --toggle-size: 14px;
        --container-width: calc(5.625em * var(--wpdm-switch-scale, 1));
        --container-height: calc(2.5em * var(--wpdm-switch-scale, 1));
        --container-radius: calc(6.25em * var(--wpdm-switch-scale, 1));
        /* radius 0 - minecraft mode :) */
        --container-light-bg: #3D7EAE;
        --container-night-bg: #1D1F2C;
        --circle-container-diameter: calc(3.375em * var(--wpdm-switch-scale, 1));
        --sun-moon-diameter: calc(2.125em * var(--wpdm-switch-scale, 1));
        --sun-bg: #ECCA2F;
        --moon-bg: #C4C9D1;
        --spot-color: #959DB1;
        --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
        --stars-color: #fff;
        --clouds-color: #F3FDFF;
        --back-clouds-color: #AACADF;
        --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
        --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
    }
  
  .theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: var(--toggle-size);
  }
  
  .theme-switch__container {
    width: var(--container-width);
    height: var(--container-height);
    background: var(--container-light-bg) !important;
    border-radius: var(--container-radius);
    overflow: hidden;
    cursor: pointer;
    -webkit-box-shadow: 0em calc(-0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25), 0em calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.94);
    box-shadow: 0em calc(-0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25), 0em calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.94);
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
  }
  
  .theme-switch__container::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    -webkit-box-shadow: 0em calc(0.05em * var(--wpdm-switch-scale, 1)) calc(0.187em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25) inset, 0em calc(0.05em * var(--wpdm-switch-scale, 1)) calc(0.187em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em calc(0.05em * var(--wpdm-switch-scale, 1)) calc(0.187em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25) inset, 0em calc(0.05em * var(--wpdm-switch-scale, 1)) calc(0.187em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25) inset;
    border-radius: var(--container-radius)
  }
  
  .theme-switch__checkbox {
    display: none;
  }
  
  .theme-switch__circle-container {
    width: var(--circle-container-diameter);
    height: var(--circle-container-diameter);
    background: rgba(255, 255, 255, 0.1) !important;
    position: absolute;
    left: var(--circle-container-offset);
    top: var(--circle-container-offset);
    border-radius: var(--container-radius);
    -webkit-box-shadow: inset 0 0 0 calc(3.375em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1), inset 0 0 0 calc(3.375em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1), 0 0 0 calc(0.625em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1), 0 0 0 calc(1.25em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 calc(3.375em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1), inset 0 0 0 calc(3.375em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1), 0 0 0 calc(0.625em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1), 0 0 0 calc(1.25em * var(--wpdm-switch-scale, 1)) rgba(255, 255, 255, 0.1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: var(--circle-transition);
    -o-transition: var(--circle-transition);
    transition: var(--circle-transition);
    pointer-events: none;
  }
  
  .theme-switch__sun-moon-container {
    pointer-events: auto;
    position: relative;
    margin-bottom: auto !important;
    z-index: 2;
    width: var(--sun-moon-diameter);
    height: var(--sun-moon-diameter);
    margin: auto;
    border-radius: var(--container-radius);
    background: var(--sun-bg) !important;
    -webkit-box-shadow: calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em rgba(254, 255, 239, 0.61) inset, 0em calc(-0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em #a1872a inset;
    box-shadow: calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em rgba(254, 255, 239, 0.61) inset, 0em calc(-0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em #a1872a inset;
    -webkit-filter: drop-shadow(calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25)) drop-shadow(0em calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25));
    filter: drop-shadow(calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25)) drop-shadow(0em calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.125em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25));
    overflow: hidden;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
  
  .theme-switch__moon {
    margin-bottom: auto !important;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    background: var(--moon-bg) !important;
    border-radius: inherit;
    -webkit-box-shadow: calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em rgba(254, 255, 239, 0.61) inset, 0em calc(-0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em #969696 inset;
    box-shadow: calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em rgba(254, 255, 239, 0.61) inset, 0em calc(-0.062em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) 0em #969696 inset;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
    position: relative;
  }
  
  .theme-switch__spot {
    position: absolute;
    top: calc(0.75em * var(--wpdm-switch-scale, 1));
    left: calc(0.312em * var(--wpdm-switch-scale, 1));
    width: calc(0.75em * var(--wpdm-switch-scale, 1));
    height: calc(0.75em * var(--wpdm-switch-scale, 1));
    border-radius: var(--container-radius);
    background: var(--spot-color);
    -webkit-box-shadow: 0em calc(0.0312em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0em calc(0.0312em * var(--wpdm-switch-scale, 1)) calc(0.062em * var(--wpdm-switch-scale, 1)) rgba(0, 0, 0, 0.25) inset;
  }
  
  .theme-switch__spot:nth-of-type(2) {
    width: calc(0.375em * var(--wpdm-switch-scale, 1));
    height: calc(0.375em * var(--wpdm-switch-scale, 1));
    top: calc(0.937em * var(--wpdm-switch-scale, 1));
    left: calc(1.375em * var(--wpdm-switch-scale, 1));
  }
  
  .theme-switch__spot:nth-last-of-type(3) {
    width: calc(0.25em * var(--wpdm-switch-scale, 1));
    height: calc(0.25em * var(--wpdm-switch-scale, 1));
    top: calc(0.312em * var(--wpdm-switch-scale, 1));
    left: calc(0.812em * var(--wpdm-switch-scale, 1));
  }
  
  .theme-switch__clouds {
    width: calc(1.25em * var(--wpdm-switch-scale, 1));
    height: calc(1.25em * var(--wpdm-switch-scale, 1));
    background: var(--clouds-color) !important;
    border-radius: var(--container-radius);
    position: absolute;
    bottom: calc(-0.625em * var(--wpdm-switch-scale, 1));
    left: calc(0.312em * var(--wpdm-switch-scale, 1));
    -webkit-box-shadow: calc(0.937em * var(--wpdm-switch-scale, 1)) calc(0.312em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(-0.312em * var(--wpdm-switch-scale, 1)) calc(-0.312em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(1.437em * var(--wpdm-switch-scale, 1)) calc(0.375em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(0.5em * var(--wpdm-switch-scale, 1)) calc(-0.125em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(2.187em * var(--wpdm-switch-scale, 1)) 0 var(--clouds-color), calc(1.25em * var(--wpdm-switch-scale, 1)) calc(-0.062em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(2.937em * var(--wpdm-switch-scale, 1)) calc(0.312em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(2em * var(--wpdm-switch-scale, 1)) calc(-0.312em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(3.625em * var(--wpdm-switch-scale, 1)) calc(-0.062em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(2.625em * var(--wpdm-switch-scale, 1)) 0em var(--back-clouds-color), calc(4.5em * var(--wpdm-switch-scale, 1)) calc(-0.312em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(3.375em * var(--wpdm-switch-scale, 1)) calc(-0.437em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(4.625em * var(--wpdm-switch-scale, 1)) calc(-1.75em * var(--wpdm-switch-scale, 1)) 0 calc(0.437em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(4em * var(--wpdm-switch-scale, 1)) calc(-0.625em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(4.125em * var(--wpdm-switch-scale, 1)) calc(-2.125em * var(--wpdm-switch-scale, 1)) 0 calc(0.437em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color);
    box-shadow: calc(0.937em * var(--wpdm-switch-scale, 1)) calc(0.312em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(-0.312em * var(--wpdm-switch-scale, 1)) calc(-0.312em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(1.437em * var(--wpdm-switch-scale, 1)) calc(0.375em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(0.5em * var(--wpdm-switch-scale, 1)) calc(-0.125em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(2.187em * var(--wpdm-switch-scale, 1)) 0 var(--clouds-color), calc(1.25em * var(--wpdm-switch-scale, 1)) calc(-0.062em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(2.937em * var(--wpdm-switch-scale, 1)) calc(0.312em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(2em * var(--wpdm-switch-scale, 1)) calc(-0.312em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(3.625em * var(--wpdm-switch-scale, 1)) calc(-0.062em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(2.625em * var(--wpdm-switch-scale, 1)) 0em var(--back-clouds-color), calc(4.5em * var(--wpdm-switch-scale, 1)) calc(-0.312em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(3.375em * var(--wpdm-switch-scale, 1)) calc(-0.437em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(4.625em * var(--wpdm-switch-scale, 1)) calc(-1.75em * var(--wpdm-switch-scale, 1)) 0 calc(0.437em * var(--wpdm-switch-scale, 1)) var(--clouds-color), calc(4em * var(--wpdm-switch-scale, 1)) calc(-0.625em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color), calc(4.125em * var(--wpdm-switch-scale, 1)) calc(-2.125em * var(--wpdm-switch-scale, 1)) 0 calc(0.437em * var(--wpdm-switch-scale, 1)) var(--back-clouds-color);
    -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  }
  
  .theme-switch__stars-container {
    position: absolute;
    color: var(--stars-color);
    top: -100%;
    left: calc(0.312em * var(--wpdm-switch-scale, 1));
    width: calc(2.75em * var(--wpdm-switch-scale, 1));
    height: auto;
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
  }
  
  /* actions */
  
  &.active .theme-switch__container {
    background: var(--container-night-bg) !important;
  }
  
  &.active .theme-switch__container .theme-switch__circle-container {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
  }
  
  &.active .theme-switch__container .theme-switch__circle-container:hover {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - calc(0.187em * var(--wpdm-switch-scale, 1)))
  }
  
  .theme-switch__circle-container:hover {
    left: calc(var(--circle-container-offset) + calc(0.187em * var(--wpdm-switch-scale, 1)));
  }
  
  &.active .theme-switch__container .theme-switch__moon {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
  }
  
  &.active .theme-switch__container .theme-switch__clouds {
    bottom: calc(-4.062em * var(--wpdm-switch-scale, 1));
  }
  
  &.active .theme-switch__container .theme-switch__stars-container {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}