/* From Uiverse.io by faxriddin20 */ 
/* Which was forked from Yaya12085 */
/* https://uiverse.io/faxriddin20/young-frog-24 */

.theme-container {
    width: 4.5em;
    height: 4.5em;
    position: relative;
    flex-shrink: 0;
}

.button {
    width: 100%;
    height: 100%;

    border-radius: 50%;
    /* border: 2px solid #d3d8df; */
  
    background-color: transparent;

    box-sizing: border-box;
    box-shadow: var(--extruded-shadow);

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.theme-container input {
    display: none;
}

.button:active {
    box-shadow: var(--inset-shadow);
}

.button::before {
    position: absolute;
    content: "";
    width: 108%;
    height: 108%;
    border-radius: inherit;
    background: var(--bg-color);
    z-index: -1;
    box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
    transition: all 0.3s ease;
}

.button .icon {
    width: 32px;
    height: 32px;
    display: inline-block;
}

.button .icon svg {
    height: 100%;
    width: 100%;
    fill: #a5a5a5;
}

.theme-container input:checked + .button {
    box-shadow: inset -2px -3px 0 #5e5e5e, inset 3.5px 3.5px 0 #1c1c1c;
    border: 4px solid #00F0FF;
    animation: animeBorder 0.3s linear alternate-reverse infinite;
}

.theme-container input:checked + .button .icon svg {
    fill: #05d5e4;
    animation: animeFill 0.3s linear alternate-reverse infinite;
}

@keyframes animeFill {
    to {
        fill: #15e4f3;
    }
}

@keyframes animeBorder {
    to {
        border-color: #19e9f8;
    }
}

::view-transition-group(root) {
  animation-timing-function: var(--expo-out);
}

::view-transition-new(root) {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="20" cy="20" r="18" fill="white" filter="url(%23blur)"/></svg>') center / 0 no-repeat;
  animation: scale 1s;
  animation-fill-mode: both;
}

::view-transition-old(root),
.dark::view-transition-old(root) {
  animation: none;
  animation-fill-mode: both;
  z-index: -1;
}
.dark::view-transition-new(root) {
  animation: scale 1s;
  animation-fill-mode: both;
}

@keyframes scale {
  to {
    mask-size: 200vmax;
  }
}