._ {
    display: flex;
    gap: 10px;
    align-items: center;
}

.label {
    font-size: 13px;
    color: var(--text_primary);
    font-family: "__luxjs__regular__";
}

.toggle {
    display: flex;
    width: 45px;
    border-radius: var(--radius_heavy);
    height: 25px;
    cursor: pointer;
    transition: 100ms;
    overflow: hidden;
    align-items: center;
    border: 1px solid var(--dynamic_tertiary);

    &:hover {
        background: var(--dynamic_secondary);

        &:active {
            background: var(--dynamic_tertiary);
        }
    }
}

.toggleActive {
    background: var(--accent_primary) !important;

    &:hover {
        background: var(--accent_secondary) !important;

        &:active {
            background: var(--accent_tertiary) !important;
        }
    }
}

.thumb {
    display: flex;
    width: calc(50% - 8px);
    height: 14px;
    border: 3px solid transparent;
    background: var(--text_primary);
    border-radius: 100%;
    transition: 100ms;
    margin-left: 4px;
}

.thumbActive {
    margin-left: 24px;
    background: var(--textOnAccent_primary);
}

.toggle:hover > .thumb {
    transform: scale(1.15);
}