$toggle_area_size: 20px

$toggle_area_with_koef: 1.5
$toggle_area_width: $toggle_area_size * $toggle_area_with_koef

$toggler_size_koef: 1.5
$toggler_size: $toggle_area_size * $toggler_size_koef
    

.root
    +flex('', center)
    cursor: pointer
    user-select: none

    &:not(._toggled) .label:first-of-type
        color: $secondary
    
    &._disabled
        cursor: default

        .label
            color: $border_color_light
        
        .toggle_area
            background: $border_color_light

        .toggler
            background: $border_color

._toggled
    .toggler
        transform: translateX(100%) translateY(-50%)
        

    .label:last-of-type
        color: $secondary


.toggle_area
    position: relative
    margin: 0 math.div($toggler_size, 2)
    width: $toggle_area_width
    height: $toggle_area_size
    background: $primary
    border-radius: $radius 


.toggler
    +absolute(50%, 50%)
    +flex(center, center)
    transform: translateX(0) translateY(-50%)
    height: $toggler_size
    width: $toggler_size
    border-radius: 50%
    background: $secondary
    transition: transform $transition

    & > i
        +font(20px, '', $border-color)




.label
    color: $primary

    &:first-of-type
        padding-right: $gutter
    
    &:last-of-type
        padding-left: $gutter