.switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    width: 80px;
    height: 28px;
    border-radius: 50em;
    border: 1px solid #d7d5d5;
    padding: 2px 0;
    cursor: pointer;
    align-self: flex-start;
    opacity: 0;
}
.loaded .switch {
    animation: enterX 0.4s ease-in-out normal forwards;
}
@media screen and (min-width: 1020px) {
    .switch {
        position: absolute;
        right: 2rem;
        top: 2.5rem;
    }
    /* .solid .switch {
        top: 1.5rem;
    } */
}
.switch__input,
.switch__label {
    animation-delay: 1400ms;
    position: absolute;
    left: 0;
    top: 0;
}
.switch .theme {
    height: 100%;
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
}
.switch .theme:after {
    content: "LIGHT";
    margin-left: 10px;
    margin-right: -10px;
    color: #222;
    position: absolute;
    top: 0;
    z-index: 9;
    pointer-events: none;
    font-size: 11px;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
}
html.dark .theme:after {
    content: "DARK";
    margin-left: 0;
    margin-right: 10px;
    color: #fff;
    margin-left: -10px;
    margin-right: 10px;
}
.switch__input {
    margin: 0;
    padding: 0;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
}
.switch__input:checked + .switch__label {
    background-color: #222;
}
.switch__input:checked + .switch__label + .switch__marker {
    left: calc(100% - 27px + 1px);
    background-color: #fff;
}
/* .switch__input:focus + .switch__label,
.switch__input:active + .switch__label {
    --color-shadow: hsla(0%, 0%, 13%, 0.2);
    -webkit-box-shadow: 0 0 0 3px #000;
    box-shadow: 0 0 0 3px #000;
} */

.switch__label {
    width: 100%;
    height: 100%;
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    border-radius: inherit;
    z-index: 1;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

.switch__marker {
    position: relative;
    background-color: #222;
    width: calc(26px - 2px * 2);
    height: calc(26px - 2px * 2);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    left: 3px;
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
    will-change: left;
    z-index: 10;
}