/*
 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
 * License granted by Canonical Limited
 *
 * This file is part of ubuntu-html5-ui-toolkit.
 *
 * This package is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or
 * (at your option) any later version.

 * This package is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, see
 * <http://www.gnu.org/licenses/>.
 * BOXES SCALED BY A FACTOR OF 0.65
 */

label:not([for])  {
    display: inline-block;
    vertical-align: middle;
    width: 2.925rem;
    height: 2.2rem;
    position: relative;
    background: none;
    margin-top: 15px;

    input[type="checkbox"] {
        margin: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;


        & + span {
            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3));
            @include box_sizing (border-box);
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -1.1rem 0 0 -1.1rem;
            width: 1.25rem;
            height: 1.15rem;
            pointer-events: none;
            border-radius: 6px;
            background: rgba(0, 0, 0, 0.0);
            background-position-y: 5px;
            -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
            transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
        }


        &:checked + span {
            background: rgba(0,161,50, 255) url(../img/tick-white@30.png) 		    no-repeat 0.2rem 0.2rem;
            background-size: 70% 70%;
            background-position-y: 5px;
            -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
            transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
        }

        &:disabled {
            + span {
                background: rgba(0, 0, 0, 0.025)!important;
            }

            &:checked + span {
                background: rgba(0,161,50, 0.5) url(../img/tick-white@30.png) no-repeat 0.2em 0.2rem!important;
                background-size: 70% 70%!important;
            }
        }
    }
}

label input[type="checkbox"][data-type="switch"] {
    + span.toggle {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -1.1rem 0 0 -1.2rem;
        width: 2.925rem;
        height: 1.43rem;
        pointer-events: none;
        overflow: hidden;
        background: rgba(136, 136, 136, 0.2);

        > span.toggle-bg {
            background: transparent url(../img/unCheckbox.png) no-repeat 0.26rem 0.21rem;
            background-size: 90% 80%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            width: 2.925rem;
            height: 1.365rem;
            -webkit-transition: background-image 0.3s ease-in-out;
            transition: background-image 0.3s ease-in-out;
        }

        > span.toggle-handle {
            @include box_sizing (border-box);
            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.2));
            position: absolute;
            top: 3px;
            left: 3px;
            z-index: 2;
            width: 1.1rem;
            height: 1.1rem;
            border-radius: 6px;
            background: rgba(0, 0, 0, 0.2);
            -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
            transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
    }

    &:checked + span.toggle {
        background: rgba(136, 136, 136, 0.2) !important;

        > span.toggle-bg {
            background: transparent url(../img/Checkbox.png) no-repeat 0.26rem 0.2275rem;
            background-size: 90% 80%;	
        }

        > span.toggle-handle {
            background: rgba(0,161,50, 255);
            -webkit-transform: translate3d(24.7px, 0, 0);
            transform: translate3d(24.7px, 0, 0);
        }
    }
}

label input[data-type="switch"]:disabled {
    + span.toggle {
        background: rgba(136, 136, 136, 0.03) !important;

        > span.toggle-handle {
            opacity: 0.4;
        }
    }

    &:checked + span.toggle > span.toggle-handle {
        opacity: 0.4;
        -webkit-transform: translate3d(24.7px, 0, 0);
        transform: translate3d(24.7px, 0, 0);
    }
}
