/* === Forms === */
// Inputs
.list-block {
    input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="number"], select, textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        box-sizing: border-box;
        border: none;
        background: none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        padding: 0 0 0 0.25rem;
        margin: 0;
        width: 100%;
        height: 2.15rem;
        color: @color-text;
        font-size: 0.85rem;
        font-family: inherit;
    }
    input[type="date"], input[type="datetime-local"] {
        line-height: 2.2rem;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    .label {
        vertical-align: top;
    }
    textarea {
        height: 5rem;
        resize:none;
        line-height: 1.4;
        padding-top: 0.4rem;
        padding-bottom: 0.35rem;
    }
}

//Switch
.label-switch {
    display: inline-block;
    vertical-align: middle;
    width: 2.6rem;
    border-radius: 0.8rem;
    box-sizing: border-box;
    height: 1.6rem;
    position: relative;
    cursor: pointer;
    .align-self(center);
    .checkbox {
        width: 2.6rem; 
        border-radius: 0.8rem;
        box-sizing: border-box;
        height: 1.6rem;
        background: #e5e5e5;
        z-index: 0;
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border:none;
        cursor: pointer;
        position: relative;
        transition-duration: 300ms;
        &:before {
            content:' ';
            position: absolute;
            left: 0.1rem;
            top: 0.1rem;
            width: 2.4rem;
            border-radius: 0.8rem;
            box-sizing: border-box;
            height: 1.4rem;
            background: #fff;
            z-index: 1;
            transition-duration: 300ms;
            transform: scale(1);
        }
        &:after {
            content:' ';
            height: 1.4rem;
            width: 1.4rem;
            border-radius: 1.4rem;
            background: #fff;
            position: absolute;
            z-index: 2;
            top: 0.1rem;
            left: 0.1rem;
            box-shadow: 0 0.1rem 0.25rem rgba(0,0,0,0.4);
            transform: translateX(0px);
            transition-duration: 300ms;
        }
    }
    input[type="checkbox"] {
        display: none;
        &:checked {
            &+ .checkbox {
                background: @color-success;
                &:before {
                    transform: scale(0);
                }
                &:after {
                    transform: translateX(1.1rem);
                }
            }
        }
    }
}
html.android {
    .label-switch input[type="checkbox"] {
        &+ .checkbox {
            transition-duration: 0;
            &:after, &:before {
                transition-duration: 0;
            }
        }
    }
}

// Slider
.range-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    margin-left: -1px;
    .align-self(center);
    input[type="range"] {
        position: relative;
        height: 1.4rem;
        width: 100%;
        margin: 0.2rem 0 0.25rem 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7));
        background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%);
        background-position: center;
        background-size: 100% 0.1rem;
        background-repeat: no-repeat;
        outline: 0;
    }
    input[type="range"]:after {
        height: 0.1rem;
        background: #fff;
        content:' ';
        width: 0.25rem;
        top: 50%;
        margin-top: -1px;
        left: -0.25rem;
        z-index: 1;
        position: absolute;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        border: none;
        height: 1.4rem;
        width: 1.4rem;
        position: relative;
        background: none;
    }
    input[type="range"]::-webkit-slider-thumb:after {
        height: 1.4rem;
        width: 1.4rem;
        border-radius: 1.4rem;
        background: #fff;
        z-index: 10;
        box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.4);
        position: absolute;
        left: 0;
        top: 0;
        content: ' ';
    }

    input[type="range"]::-webkit-slider-thumb:before {
        position: absolute;
        top: 50%;
        right: 100%;
        width: 100rem;
        height: 0.1rem;
        margin-top: -1px;
        z-index: 1;
        background: @color-primary;
        content: ' ';
    }
}

// Checkboxes
label.label-checkbox {
    cursor: pointer;
    i.icon-form-checkbox {
        width: 1.1rem;
        height: 1.1rem;
        position: relative;
        border-radius: 1.1rem;
        border: 1px solid #c7c7cc;
        box-sizing: border-box;

        &:after {
            content:' ';
            position: absolute;
            left: 50%;
            margin-left: -0.3rem;
            top: 50%;
            margin-top: -0.2rem;
            width: 0.6rem;
            height: 0.45rem;
        }
    }
    input[type="checkbox"], input[type="radio"] {
        display: none;
        &:checked + .item-media{
            i.icon-form-checkbox {
                border: none;
                background-color: @color-primary;
            }
            i.icon-form-checkbox:after {
                background: no-repeat center;
                .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#ffffff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
                -webkit-background-size: 0.6rem 0.45rem;
                background-size: 0.6rem 0.45rem;
            }
        }
    }
}
label.label-checkbox {
    transition-duration: 300ms;
    html:not(.watch-active-state) &:active, &.active-state {
        transition: 0ms;
        background-color: #d9d9d9;
        .item-inner {
            .hairline-color(bottom, transparent);
        }
    }
}

// Smart selects
.smart-select {
    select {
        display: none;
    }
}