.switch {
    z-index: 99;
    width: 40px;
    height: 70px;
    position: fixed;
    top: 160px;
    right: 40px;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 2px solid #1B1B1B;
    border-radius: 42px;
    overflow: hidden;
    padding: 1px;
}

.switch__indicator {
    position: absolute;
    left: 1px;
    width: 34px;
    height: 34px;
    background: #1B1B1B;
    border-radius: 50%;
    transition:
        transform 0.45s cubic-bezier(.68,-0.55,.27,1.55),
        height 0.25s ease;
}

.switch--dark .switch__indicator {
    transform: translateY(0);
}

.switch--light .switch__indicator {
    transform: translateY(30px);
}

.switch.switch--animating .switch__indicator {
    height: 40px;
}

.switch:not(.switch--animating) .switch__indicator {
    height: 34px;
}

.switch--dark .switch__button--dark,
.switch--light .switch__button--light {
    color: #FFFFFF;
}

.switch--dark .switch__button--light,
.switch--light .switch__button--dark {
    color: #1B1B1B;
}

.switch__button {
    width: 100%;
    position: relative;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1B1B1B;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.switch__button--light {
    margin-top: -4px;
}

.switch__button svg path {
    transition: all 0.45s cubic-bezier(.68,-0.55,.27,1.55);
}