@use 'sass:math';

.c-toggle-switch {
    $d: 12px;
    $m: 2px;
    $br: math.div($d, 1.5);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;

    &__control,
    &__label {
        flex: 0 0 auto;
    }

    &__control {
        cursor: pointer;
        overflow: hidden;
        display: block;
    }

    input {
        opacity: 0;
        width: 0;
        height: 0;

        &:checked {
            + .c-toggle-switch__slider {
                background: $colorKey; // TODO: make discrete theme constants for these colors
                &:before {
                    transform: translateX(100%);
                }
            }
        }
    }

    &__slider {
        // Sits within __switch
        background: $colorBtnBg; // TODO: make discrete theme constants for these colors
        border-radius: $br;
        display: inline-block;
        height: $d + ($m*2);
        position: relative;
        width: $d*2 + $m*2;

        &:before {
            // Knob
            background: $colorBtnFg; // TODO: make discrete theme constants for these colors
            border-radius: floor($br * 0.8);
            box-shadow: rgba(black, 0.4) 0 0 2px;
            content: '';
            display: block;
            position: absolute;
            height: $d; width: $d;
            top: $m; left: $m; right: auto;
            transition: transform 100ms ease-in-out;
        }
    }

    &__label {
        margin-left: $interiorMarginSm;
        white-space: nowrap;
    }
}
