@import "colors";

$select_border_color: rgba(170, 170, 170, 0.38);
$wingsuite_core_dark_bg: $color_gray_900;


@mixin header-footer {
    border-color: $wingsuite_core_dark_bg;
    background-color: $wingsuite_core_dark_bg;
    background: $wingsuite_core_dark_bg;
    color: $color_light;
}

.wingsuite_core-prio--style{
    .button{
        &.button-primary{
            border-width: $border_0 !important;
            background-color: $color_primary !important;
            &:hover{
                background-color: $color_primary_active !important;
            }
        }
        &.wingsuite_core-warning-primary{
            border-width: $border_0 !important;
            background-color: $color_danger !important;
            &:hover{
                background-color: $color_danger_active !important;
            }
        }
        &.button-small,
        &.button-secondary{
            border-color: $color_primary !important;
            color: $color_primary !important;
            &:hover{
                background-color: $color_primary_light !important;
            }
        }
        &.wp-color-result{
            border-color: $color_primary !important;
            color: $color_primary !important;
        }
    }
    .wingsuite_core-header{
        .wingsuite_core-header-inner {
            @include header-footer;
            h1{
                color: $color_light;
            }
            .wingsuite_core-form-result{
                &.wingsuite_core-form-success{
                    background-color: $color_success !important;
                    color: $color_light !important;
                }
                &.wingsuite_core-form-warning{
                    background-color: $color_warning !important;
                    color: $color_dark !important;
                }
            }  
        }
    }
    .wingsuite_core-footer{
        @include header-footer;
    }
    .wingsuite_core-wrapper{
        .wingsuite_core-nav{
            li{
                background-color: $wingsuite_core_dark_bg;
                background: $wingsuite_core_dark_bg;
                color: $color_light;
                
                a{
                    color: $color_light;
                    background-color: $wingsuite_core_dark_bg;
                    border-radius: 0px;
                    border-color: $wingsuite_core_dark_bg !important;
                    &:hover,
                    &.wingsuite_core-active{
                        color: $color_light;
                        background-color: $color_danger !important;
                    }
                }
                
                
                &.wingsuite_core-tab-expanded{
                    ul{
                        
                        a{
                            position: relative;
                            padding-left: 45px;
                            &:before{
                                content: "";
                                height: 6px;
                                width: 6px;
                                border-radius: 50rem;
                                background: currentColor;
                                position: absolute;
                                left: 30px;
                                color: $color_light;
                                top: 50%;
                                transform: translateY(-50%);
                            }
                            &.wingsuite_core-active{
                                &:before{
                                    color : $color_light;
                                }
                            }
                            
                        }
                    }
                    
                }

            }
        }
        .wingsuite_core-nav-background{
            border-width: $border_0 !important;
            background-color: $wingsuite_core_dark_bg;
            
        }
        .wingsuite_core-content{
            .wingsuite_core-field{
                border-width: $border_0 !important;
                &.wingsuite_core-field-button_set{
                    .wingsuite_core--button{
                        border-color: $border_color_btn_set !important;
                        &.wingsuite_core--active{
                            background-color: $color_primary !important;
                        }
                    }
                }
                input[type=color],
                input[type=date],
                input[type=datetime-local],
                input[type=datetime],
                input[type=email],
                input[type=month],
                input[type=number],
                input[type=password],
                input[type=search],
                input[type=tel],
                input[type=text],
                input[type=time],
                input[type=url],
                input[type=week],
                select,
                textarea {
                    box-shadow: 0 0 0 transparent;
                    border-radius: 4px;
                    border: 1px solid #2476ff;
                    background-color: #fff;
                    color: #2c3338;
                    background-color: $color_gray_200 !important;
                    border-color: $color_gray_200 !important;
                    border-width: 2px;
                    &:focus{
                        background-color: $color_gray_200 !important;
                        border-color: $color_primary !important;
                        
                    }
                }
                .wingsuite_core--switcher{
                    background-color: $color_danger;
                    padding: 0px 5px;
                    &.wingsuite_core--active{
                        background-color: $color_success;
                    }
                    .wingsuite_core--ball{
                        background-color: $switcher_ball_color;
                    }
                }
                input[type=checkbox],
                input[type=radio] {
                    border-radius: 2px !important;
                    height: 18px;
                    width: 18px;
                    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
                    background-color: $color_gray_300 !important;
                    border-width: 0px;
                }
                input[type=checkbox]:checked::before {
                    content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23FFFFFF%27%2F%3E%3C%2Fsvg%3E") !important;
                    margin-top: 0px !important;
                    margin-left: 0px !important;
                    background-color: $color_success !important;
                    border-radius: 2px !important;
                    width: 18px;
                    height: 18px;
                }
                input[type=radio] {
                    border-radius: 100% !important;
                }

                input[type=radio]:checked::before {
                    content: "";
                    border-radius: 50%;
                    width: 14px;
                    height: 14px;
                    margin: 2px;
                    background-color: $color_primary;
                }
                input[readonly=readonly] {
                    background-color: $color_gray_300 !important;
                    border-color: $color_gray_300 !important;
                }
                
            }
            .wingsuite_core-field{
                &.wingsuite_core-field-typography,
                &.wingsuite_core-field-select{
                    .chosen-container{
                        border-color: $select_border_color !important;
                        *{
                            border-color: $select_border_color !important;
                        }
                    }
                }
                .button{
                    &.button-primary{
                        &.wingsuite_core-repeater-add{
                            &:focus{
                                box-shadow: none !important;
                            }
                        }
                    }
                }
                
                &.wingsuite_core-field-group{
                    .wingsuite_core-cloneable-title{
                        border-color: $color_gray_300 !important;
                        &.ui-accordion-header-active,
                        &:active,
                        &:focus,
                        &:hover{
                            border-color: $color_gray_300 !important;
                            background-color: $color_gray_300 !important;
                        }
                    }
                    .wingsuite_core-cloneable-content{
                        border-color: $color_gray_300 !important;
                    }
                }
                &.wingsuite_core-field-accordion{
                    .wingsuite_core-accordion-title{
                        border-color: $color_gray_300 !important;
                        &.ui-accordion-header-active,
                        &:active,
                        &:focus,
                        &:hover{
                            border-color: $color_gray_300 !important;
                            background-color: $color_gray_300 !important;
                        }
                    }
                    .wingsuite_core-accordion-content{
                        border-color: $color_gray_300 !important;
                    }
                }
                &.wingsuite_core-field-spacing,
                &.wingsuite_core-field-spinner,
                &.wingsuite_core-field-border,
                &.wingsuite_core-field-dimensions{
                    .wingsuite_core--label{
                        border-color: $color_gray_300 !important;
                        background-color: $color_gray_300 !important;
                    }
                }
                &.wingsuite_core-field-spinner{
                    .ui-button{
                        border-color: $color_gray_300 !important;
                        background-color: $color_gray_300 !important;
                    }
                }
                &.wingsuite_core-field-slider,
                &.wingsuite_core-field-number{
                    .wingsuite_core--unit{
                        background-color: $color_gray_300 !important;
                        border-color: $color_gray_300 !important;
                    }
                        
                }
                &.wingsuite_core-field-slider{
                    .ui-slider{
                        background-color: $color_gray_300 !important;
                        height: 5px;
                        border-radius: 10px;
                    }
                    .ui-slider-range{
                        background-color: $color_primary !important;
                        height: 5px;
                        border-radius: 10px;
                    }
                    .ui-slider-handle{
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        background-color: $color_primary !important;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                &.wingsuite_core-field-image_select{
                    .wingsuite_core--image{
                        figure {
                            border-color: $color_gray_300;
                        }
                        &.wingsuite_core--active{
                            figure{
                                border-color: $color_primary;
                            }
                        }
                        &.wingsuite_core-help{
                            position: static;
                        }
                    }
                }
            }
            
        }
    }
}