/* https://codepen.io/mrozilla/pen/OJJNjRb */
.zp-dark-toggle {
    display: inline-block;
    padding: 10px 0;
    margin: 0;
    margin-left: 10px;

    .dark-toggle-button {
        --size: 1.2rem;

        appearance: none;
        outline: none;
        cursor: pointer;

        width: var(--size);
        height: var(--size);

        border-radius: 999px;

        transition: all 500ms;

        // 해 모양
        --ray-size: calc(~"var(--size) * -0.4");
        --offset-orthogonal: calc(~"var(--size) * 0.65");
        --offset-diagonal: calc(~"var(--size) * 0.45");

        transform: scale(0.75);
        color: hsl(40, 100%, 50%);
        box-shadow:
            inset 0 0 0 var(--size),
            calc(~"var(--offset-orthogonal) * -1") 0 0 var(--ray-size),
            var(--offset-orthogonal) 0 0 var(--ray-size),
            0 calc(~"var(--offset-orthogonal) * -1") 0 var(--ray-size),
            0 var(--offset-orthogonal) 0 var(--ray-size),
            calc(~"var(--offset-diagonal) * -1") calc(~"var(--offset-diagonal) * -1") 0 var(--ray-size),
            var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
            calc(~"var(--offset-diagonal) * -1") var(--offset-diagonal) 0 var(--ray-size),
            var(--offset-diagonal) calc(~"var(--offset-diagonal) * -1") 0 var(--ray-size),
        ;
        &:checked {
            color: hsl(240, 100%, 95%);
            transform: none;
            box-shadow: inset calc(~"var(--size) * 0.33") calc(~"var(--size) * -0.25") 0;
        }
    }
}
