/*==========================
Framework7 Color Themes
==========================*/
.theme-mixin(@colorName, @color, @colorHex) {
    //Plain color and links
    .color-@{colorName} {
        color: @color;
        .list-block .item-link.list-button&, .tabbar a.active&, a& {
            color: @color;
        }
        .label-switch input[type="checkbox"]:checked + .checkbox&, .label-switch& input[type="checkbox"]:checked + .checkbox{
            background-color: @color;
        }
    }
    //Buttons
    .color-@{colorName}.button:not(.button-fill), .color-@{colorName}.buttons-row .button, .theme-@{colorName} .button:not(.button-fill) {
        border-color: @color;
        html:not(.watch-active-state) &:active, &.active-state {
            background-color: rgba(red(@color), green(@color), blue(@color), 0.15);
        }
        &.active {
            background-color: @color;
            color:#fff;
        }
    }
    .theme-@{colorName} .button.button-fill, .button.button-fill.color-@{colorName} {
        background: @color;
        color:#fff;
    }
    // Progress bar
    .progressbar {
        &.color-@{colorName}, &.theme-@{colorName}, .theme-@{colorName} &, &.bg-@{colorName} {
            span {
                background-color: @color;
            }
        }
    }
    .progressbar-infinite {
        &.color-@{colorName}, &.theme-@{colorName}, .theme-@{colorName} &, &.bg-@{colorName} {
            &:before {
                background-color: @color;
            }
        }
    }
    //Icons
    .color-@{colorName}, .theme-@{colorName} {
        i.icon-jmui, i.icon-jmui& {
            color:@color;
        }
    }
    i.icon-jmui-next.color-@{colorName}, i.icon-jmui-next.theme-@{colorName}, .theme-@{colorName} i.icon-jmui-next {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#@{colorHex}' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
    }
    i.icon-jmui-prev.color-@{colorName}, i.icon-jmui-prev.theme-@{colorName}, .theme-@{colorName} i.icon-jmui-prev {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#@{colorHex}' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
    }
    i.icon-jmui-back.color-@{colorName}, i.icon-jmui-back.theme-@{colorName}, .theme-@{colorName} i.icon-jmui-back {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#@{colorHex}'/></svg>");
    }
    i.icon-jmui-forward.color-@{colorName}, i.icon-jmui-forward.theme-@{colorName}, .theme-@{colorName} i.icon-jmui-forward {
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#@{colorHex}'/></svg>");
    }
    // Theme
    .theme-@{colorName} {
        a, .item-link.list-button {
            color: @color;
        }
        .tabbar, .tabbar& {
            a, a i {
                color:inherit;
            }
            a.active, a.active i {
                color:@color;
            }
        }
        .range-slider, .range-slider& {
            input[type="range"]::-webkit-slider-thumb:before {
                background-color: @color;
            }
            input[type="range"]::-ms-fill-lower {
                background-color: @color;
            }
        }
        label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-jmui-form-checkbox, label.label-checkbox input[type="radio"]:checked + .item-media i.icon-jmui-form-checkbox {
            background-color: @color;
        }
        label.label-radio input[type="checkbox"]:checked ~ .item-inner, label.label-radio input[type="radio"]:checked ~ .item-inner {
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'><polygon fill='#@{colorHex}' points='11.6,0 4.4,7.2 1.4,4.2 0,5.6 4.4,10 4.4,10 4.4,10 13,1.4 '/></svg>");
        }
        .picker-calendar-day.picker-calendar-day-selected span {
            background-color: @color !important;
        }
    }
    // Bg rule
    .bg-@{colorName}, .button.button-fill.bg-@{colorName}, a.bg-@{colorName}{
        background-color: @color;
    }
    // Border rule
    .border-@{colorName} {
        border-color: @color;
        .list-block &.item-inner, .list-block ul&, & {
            &:after, &:before {
                background-color: @color;
            }
        }
    }
    //Badges
    .badge.color-@{colorName}, .badge.theme-@{colorName} {
    	background-color:@color;
    	color: #fff;
    }
}
