@import "../style/variable";
@import "../style/mixin";

.dev-tools { .tools {
    .settings {
        @include overflow-auto(y);
        .separator {
            height: 10px;
        }
        .text {
            padding: $padding;
            color: $gray-dark;
            font-size: 12px;
        }
        .select, .range {
            cursor: pointer;
        }
        .select .head, .switch, .range .head {
            padding: $padding;
            background: #fff;
            font-size: $font-size;
            border-bottom: 1px solid $gray-light;
        }
        .select .head, .range .head {
            transition: background $anim-duration, color $anim-duration;
            span {
                float: right;
            }
            &:active {
                background: $blue;
                color: #fff;
            }
        }
        .select ul {
            display: none;
            &.open {
                display: block;
            }
            li {
                padding: $padding;
                background: $gray-light;
                transition: background $anim-duration, color $anim-duration;
                &:active {
                    background: $blue;
                    color: #fff;
                }
            }
        }
        .range .input-container {
            display: none;
            padding: $padding;
            background: $gray-light;
            &.open {
                display: block;
            }
            input {
                -webkit-appearance: none;
                background: $gray;
                height: 4px;
                width: 100%;
                position: relative;
                top: -3px;
                margin: 0 auto;
            }
            input::-webkit-slider-thumb {
                -webkit-appearance: none;
                position: relative;
                top: 0px;
                z-index: 1;
                width: 15px;
                height: 15px;
                border-radius: 10px;
                background-color: #FFF;
                box-shadow: $box-shadow;
            }
        }
        .switch {
            .checkbox {
                float: right;
                position: relative;
                vertical-align: top;
                width: 46px;
                height: 20px;
                padding: 3px;
                border-radius: 18px;
                box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
                cursor: pointer;
                background-image: linear-gradient(to bottom, #eeeeee, white 25px);
                .input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                }
                .label {
                    pointer-events: none;
                    position: relative;
                    display: block;
                    height: 14px;
                    font-size: 10px;
                    text-transform: uppercase;
                    background: #eceeef;
                    border-radius: inherit;
                    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
                    transition: 0.15s ease-out;
                    transition-property: opacity background;
                    &:before, &:after {
                        position: absolute;
                        top: 50%;
                        margin-top: -.5em;
                        line-height: 1;
                        transition: inherit;
                    }
                }
                .input:checked ~ .label {
                    background: $blue;
                    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
                }
                .input:checked ~ .label:before {
                    opacity: 0;
                }
                .input:checked ~ .label:after {
                    opacity: 1;
                }
                .handle {
                    position: absolute;
                    pointer-events: none;
                    top: 0;
                    left: 0;
                    width: 18px;
                    height: 18px;
                    border-radius: 10px;
                    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
                    background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
                    transition: left 0.15s ease-out;
                }
                .handle:before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin: -6px 0 0 -6px;
                    width: 12px;
                    height: 12px;
                    border-radius: 6px;
                    box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
                    background-image: linear-gradient(to bottom, #eeeeee, white);
                }
                .input:checked ~ .handle {
                    left: 30px;
                    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
                }
            }
        }
    }
} }