/**
 * Fallsky Lite Customizer Style
 * 
 * Theme Name: Fallsky Lite
 * Theme URI: http://www.loftocean.com/fallsky-lite
 * Author: Kaylolo Yinxi Chen @Loft.Ocean
 * Author URI: http://www.loftocean.com
 * Description: Fallsky Lite is a lifestyle WordPress magazine theme.
 * Version: 1.0.2
*/

// Define base colors
$primary-color:     #111;
$text-color:        #111;
$description-color: #888;

@mixin transform($transform) {
    -webkit-transform: $transform;
    -ms-transform: $transform;
    transform: $transform;
}

.hide {
    display: none !important;
    visibility: hidden !important;
}

#customize-theme-controls.fallsky-lite-customizer-wrapper {
    .customize-section-title h3,
    .accordion-section-title .preview-notice .panel-title {
        font-size: 16px;
        font-weight: 600;
    }
    
    .customize-control-title {
        margin-top: 0;
        color: $text-color;
        font-size: 12px;
        
        + span.description {
            margin-top: -6px;
        }
    }
    
    span.description {
        margin-bottom: 12px;
        color: $description-color;
        font-size: 11px;
        font-style: normal;
        
        strong {
            color: $text-color;
            font-weight: bold;
        }
    }
    
    a span.description {
        color: inherit;
    }
    
    select,
    textarea,
    input {
        border: 1px solid $primary-color;
        font-size: 12px;
        
        &:focus {
            border-color: $primary-color;
            box-shadow: 0 0 2px rgba(156, 165, 200,.8);
        }
    }
    
    input[type="radio"]:checked:before {
        background-color: $primary-color;
    }
    
    input[type="checkbox"]:checked:before {
        color: $primary-color;
    }
    
    select[multiple] {
        height: 120px;
    }
    
    label.title-first-checkbox,
    li#customize-control-display_header_text label {
        margin-left: 0;
        color: $text-color;
        font-size: 12px;
        
        .customize-control-title {
            display: inline-block;
            max-width: calc(100% - 50px);
        }
        
        input[type="checkbox"] {
            position: relative;
            float: right;
            width: 33px;
            height: 33px;
            background: #fff;
            border-radius: 50%;
            border: 1px solid $primary-color;
            box-shadow: none;
            font-size: 0;
            
            .rtl & {
                float: left;
            }
            
            &:checked:before {
                position: absolute;
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
                margin: 0 0 0 -3px;
                color: $primary-color;
                
                .rtl & {
                    margin: 0 -3px 0 0;
                }
                
                @media screen and (max-width: 782px) {
                    & {
                        margin: 0 0 0 -8px;
                        
                        .rtl & {
                            margin: 0 -8px 0 0;
                        }
                    }
                }
            }
        }
    }
    
    .accordion-section-content {
        padding: 0;
        
        &:before {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            display: block;
            width: 100%;
            height: 100%;
            background: #fff;
            content: "";
        }
        
        &#menu-to-edit,
        &.control-section-sidebar {
            &:before {
                display: none;
            }
        }
        
        li {
            padding: 20px;
            margin-bottom: 0;
            border-top: 1px solid #e6e6e6;
            box-sizing: border-box;
            
            &.customize-section-description-container {
                padding: 12px 12px 0;
            }
            
            &:nth-of-type(-n+2) {
                border-top: none;
            }
            
            &.customize-control-title_only {
                padding-bottom: 0;
                
                h3 {
                    padding: 10px;
                    margin-top: 0.5em;
                    background: #f3f3f5;
                    text-align: center;
                    font-size: 12px;
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                }
                
                & + li {
                    padding-top: 10px;
                    border-top: none;
                }
            }
        }
        
        &.control-section-sidebar,
        &.menu,
        &#sub-accordion-section-custom_css {
            padding: 12px;
            
            li {
                padding: 0;
                margin-bottom: 15px;
                border: none;
            }
        }
        
        &.menu li {
            margin-bottom: 0;
        }
        
        &#sub-accordion-section-custom_css li#customize-control-custom_css:last-child {
            margin-bottom: -12px;
        }
    }
    
    .wp-picker-container {
        overflow: visible;
        width: auto;
        
        .wp-color-result {
            width: 24px;
            height: 24px;
            padding: 0;
            margin-top: 2px;
            border: 1px solid rgba(#000, 0.1);
            border-radius: 50%;
            box-shadow: none !important;
            line-height: 28px;
            
            &:after {
                right: auto;
                left: 24px;
                width: 80px;
                padding: 0 6px;
                background: transparent;
                border: none;
                color: #555;
                font-size: 11px;
                text-align: left;
                line-height: 24px;
            }
            
            .wp-color-result-text {
                margin-left: 24px;
                background: none;
                border: none;
                color: inherit;
                line-height: 24px;
                
                body.rtl & {
                    margin-right: 24px;
                    margin-left: 0;
                }
            }
        }
        
        .wp-picker-open + .wp-picker-input-wrap {
            float: right;
            width: auto;
            margin-top: -2px;
            
            .rtl & {
                float: left;
            }
        }
        
        input[type="text"].wp-color-picker {
            display: inline-block;
            padding: 0 5px;
            margin-top: 0;
            width: 70px !important;
            border: 1px solid $primary-color;
            vertical-align: top;
            line-height: 26px;
        }
        
        .button.wp-picker-default,
        .button.wp-picker-clear {
            height: 28px;
            box-shadow: none;
            background: $primary-color;
            color: #fff;
            line-height: 26px;
            
            @media screen and (max-width: 640px) {
                & {
                    padding: 0 10px 1px;
                }
            }
        }
    }
    
    .attachment-media-view,
    .media-widget-preview.media_audio,
    .media-widget-preview.media_image {
        background: none;
    }
    
    li.customize-control-group {
        h3.group-title {
            padding: 10px;
            margin: 0.5em 0 20px;
            background: #F3F3F5;
            text-align: center;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        .group-controls-wrap {
            li {
                padding: 10px 0 20px;
                border-top: none;
                
                .customize-inside-control-row {
                    margin-left: 0;
                }
                
                &.customize-control-checkbox .customize-inside-control-row input,
                &.customize-control-radio .customize-inside-control-row input {
                    margin-left: 0;
                }
                
                &.customize-control-number_slider {
                    padding-top: 20px;
                }
            }
        }
    }

    ul#input_woocommerce_thumbnail_cropping {
        margin-right: 0;
        
        li {
            padding-right: 0;
            padding-left: 0;
            border: none;
        }
    }
    
    li.customize-control-nav_menu_auto_add {
        margin-top: 12px;
    }
    
    .rtl & li#customize-control-fallsky_lite_site_logo_width {
        .number-with-label-wrapper {
            float: left !important;
        }
    }
}