////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel CheckBox

// CheckBox variables
$checkbox-border-radius: 3px
$checkbox-label-separation: 8px
$checkbox-label-font-size: 16px

$checkbox-svg-checked: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{$primary-color}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
$checkbox-svg-checked-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{darken($disabled-color, 15%)}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center

$checkbox-svg-indeterminate: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><rect stroke-width='0' stroke='#FFFFFF' height='12' width='12' y='5' x='5' fill='#{$primary-color}' /></svg>") no-repeat center center
$checkbox-svg-indeterminate-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><rect stroke-width='0' stroke='#FFFFFF' height='12' width='12' y='5' x='5' fill='#{darken($disabled-color, 15%)}' /></svg>") no-repeat center center

$checkbox-svg-rejected: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><line stroke-width='4' stroke='#{$primary-color}' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /></svg>") no-repeat center center
$checkbox-svg-rejected-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><line stroke-width='4' stroke='#{darken($disabled-color, 15%)}' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /></svg>") no-repeat center center

.jewel.checkbox
    
    // -- INPUT
    input
        
        + span::before
            @if $flat
                background: lighten($default-color, 15%)
                border: 1px solid $default-color
            @else
                background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
                border: 1px solid darken($default-color, 15%)
            border-radius: $checkbox-border-radius

        + span::after
            background: $checkbox-svg-checked
            border: 1px solid transparent
            border-radius: $checkbox-border-radius
            
            transition: all .3s ease
            transform: scale(0)
        
        &:checked + span::after, &:checked:active + span::after
            background: $checkbox-svg-checked
            transform: scale(1)
        
        &:indeterminate + span::after, &:indeterminate:active + span::after
            background: $checkbox-svg-indeterminate
            //does not inherit the opacity that checked does.
            opacity: 1
            transform: scale(1)
        
        &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before, &:indeterminate:focus + span::before, &:indeterminate:active:focus + span::before
            @if $flat
                background: lighten($primary-color, 25%)
                border: 1px solid $primary-color
            @else
                background: linear-gradient(lighten($primary-color, 30%), lighten($primary-color, 20%))
                border: 1px solid darken($primary-color, 15%)
            border-radius: $checkbox-border-radius

        &[disabled]
            & + span
                color: $disabled-font-color

            & + span::before
                background: $disabled-color
                @if $flat
                    border: 1px solid $disabled-border-color
                @else
                    border: 1px solid $disabled-border-color// .094em
                border-radius: $checkbox-border-radius

        &:checked[disabled] + span::after
            background: $checkbox-svg-checked-disabled

        &:indeterminate[disabled] + span::after
            background: $checkbox-svg-indeterminate-disabled

    // -- LABEL
    span
        padding-left: $checkbox-label-separation
        //font-size: $checkbox-label-font-size

    &.rejected

        input
        
            &:indeterminate + span::after, &:indeterminate:active + span::after
                background: $checkbox-svg-rejected
                //does not inherit the opacity that checked does.
                opacity: 1
                transform: scale(1)

            &:indeterminate[disabled] + span::after
                background: $checkbox-svg-rejected-disabled

// Jewel CheckBoxSwitch

// CheckBoxSwitch variables
$switch-button-size: 24px
$switch-button-offset: 2px
$switch-inner-size: $switch-button-size - (2 * $switch-button-offset)
$switch-button-border-radius: 50%
$switch-transition-delay: .4s
$switch-label-separation: 8px

.jewel.switch

    input
        &:checked 
            + .switch
                @if $flat
                    background: $primary-color
                @else
                    background: linear-gradient(lighten($primary-color, 0%), lighten($primary-color, 10%))
                box-shadow: 0px 0px 0px 1px darken($primary-color, 5%)

        &:focus
            + .switch
                box-shadow: 0px 0px 0px 1px darken($primary-color, 10%)
        
        // &:checked:focus
        //     + .switch
        //         box-shadow: 0px 0px 0px 1px darken($primary-color, 10%)

        &:checked 
            + .switch::before
                @if $flat
                    background: lighten($primary-color, 45%)
                    box-shadow: none
                @else
                    background: lighten($primary-color, 45%)
                    box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, .1)
                transform: translateX($switch-inner-size)

        &[disabled]
            &:checked 
                + .switch
                    @if $flat
                        background: lighten($disabled-font-color, 10%)
                    @else
                        background: lighten($disabled-font-color, 10%)
                    box-shadow: 0px 0px 0px 1px lighten($disabled-font-color, 5%)

            & + .switch
                @if $flat
                    background: lighten($default-color, 10%)
                @else
                    background: lighten($default-color, 10%)
                box-shadow: 0px 0px 0px 1px lighten($disabled-font-color, 15%)
                
            & + .switch::before
                @if $flat
                    background: lighten($default-color, 25%)
                    box-shadow: none
                @else
                    background: lighten($disabled-color, 10%)
                    box-shadow: none

    .switch
        @if $flat
            background: linear-gradient(lighten($default-color, 0%), lighten($default-color, 0%))
        @else
            background: linear-gradient(lighten($default-color, 0%), lighten($default-color, 10%))
        box-shadow: 0px 0px 0px 1px darken($default-color, 5%)
        transition: $switch-transition-delay
        border-radius: $checkbox-border-radius

        &::before
            @if $flat
                background: lighten($default-color, 45%)
                box-shadow: none
            @else
                background: lighten($primary-color, 45%)
                box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, .1)
            transition: $switch-transition-delay
            border-radius: $checkbox-border-radius 

    .label
        padding-left: $switch-label-separation

    &.radio
        .switch
            border-radius: $switch-inner-size

            &::before
                border-radius: $switch-button-border-radius