@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";

$switch-height: 20px;
$switch-width: 36px;
$switch-knob-gap: 2px;

$switch-small-ratio: 1.5;

$checked-bg: color(white);
$unchecked-bg: color(grey, 6);

$duration: 0.36s;

.one-ui-switch {
    $root: &;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;

    @include setMargin();
    @include setFlex();


    &__element {
        -webkit-appearance: none;

        position: relative;

        border: none;
        background-color: fade_out($unchecked-bg, 0.5);
        transition: all #{$duration} cubic-bezier(0.35, 0, 0.25, 1);


        &:after {
            content: " ";
            position: absolute;
            cursor: pointer;
            top: #{$switch-knob-gap};
            border-radius: 50%;

            background-color: color(white);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
            transition: left #{$duration} cubic-bezier(0.35, 0, 0.25, 1);
        }

        &:focus {
            box-shadow: none;
            outline: none;
        }
    }

    &--size {
        &-md {
            #{$root}__element {
                width: #{$switch-width / $switch-small-ratio};
                height: #{$switch-height / $switch-small-ratio};
                border-radius: #{$switch-height / 3};
                margin-right: #{$switch-width / $switch-small-ratio/2};
                &:after {
                    width: #{$switch-height / $switch-small-ratio - $switch-knob-gap * 2};
                    height: #{$switch-height / $switch-small-ratio - $switch-knob-gap * 2};
                    left: #{$switch-knob-gap};
                }
            }
        }
        &-lg {
            #{$root}__element {
                width: #{$switch-width};
                height: #{$switch-height};
                border-radius: #{$switch-height / 2};
                margin-right: #{$switch-width / $switch-small-ratio/2};
                &:after {
                    width: #{$switch-height - $switch-knob-gap * 2};
                    height: #{$switch-height - $switch-knob-gap * 2};
                    left: #{$switch-knob-gap};
                }
            }
        }
    }

    &--height{
        $sizeNames: xsm sm md lg xl;
        $sizes: 24 32 40 48 56;

        @mixin switchHeight($root, $size) {
            $i: index($sizes, $size);
            &-#{nth($sizeNames, $i)} {
                height: #{$size}px;
            }
        }
        @each $size in $sizes {
            @include switchHeight($root, $size);
        }
    }

    &--checked {
        #{$root}__element {
            background-color: color(teal);
        }

        &#{$root}--size {
            &-md {
                #{$root}__element:after {
                    left: #{$switch-width / $switch-small-ratio + $switch-knob-gap - $switch-height / $switch-small-ratio};
                }
            }
            &-lg {
                #{$root}__element:after {
                    left: #{$switch-width + $switch-knob-gap - $switch-height};
                }
            }
        }
    }

    &--disabled {
        cursor: not-allowed;
        opacity: 0.3;

        &:after {
            cursor: not-allowed;
        }
    }

    .one-ui-title {
        pointer-events: none;
        user-select: text;

        padding: 0 8px;
    }
}