@ssd_accordion_content_width: 258px;

@ssd_layout_column_margin: 16px;
@ssd_layout_img_width: ( @ssd_accordion_content_width - @ssd_layout_column_margin ) / 2;

//@ssd_active_color: #2ea2cc; // WP save button
@ssd_active_color: #177FB6; // Job
@ssd_grey: #EEEEEE; // Job

@ssdGray2: #D1D1D1;
@ssdGray4: #383838;

// Overrules

// Place panel back buttons at top left of viewport
.customize-panel-back, .customize-section-back {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 47px;
    height: 45px;
    border: 0;
    background-color: #0091CD !important;
    color: white !important;

    &:before {
        line-height: 45px;
    }
}
.panel-meta.customize-info .accordion-section-title {
    margin-left: 0 !important;
}

// Own styles

.ssd_grid {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .ssd_grid_item {
//            width: (@ssd_layout_img_width;
        color: grey;
        cursor: pointer;
        padding-bottom: 8px;
        overflow: hidden;

        .ssd_title {
            margin-bottom: 2px;
        }

        .ssd_img {
            position: relative;
            height: 68px;

            img {
                width: @ssd_layout_img_width;
                //height: ( 68 * 113 / 120 );
            }
            .ssd_img_border{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
            }
        }

        &.ssd_selected, &.ssd_grid_item_closed:hover {
            background-color: #D7D7D7;
            color: @ssd_active_color;
            font-weight: bold;
            .ssd_img_border{
                box-shadow: inset 0 0 0 3px @ssd_active_color;
            }
        }
    }
}

//#customize-control-ssd_imageset {
//    .ssd_grid_item {
//        width: @ssd_layout_img_width;
//    }
//}

#customize-control-ssd_layout {
    .ssd_grid_item {
        width: @ssd_layout_img_width;
    }
}

#customize-control-ssd_style, #customize-control-ssd_category {
    .ssd_grid_item {
        width: 100%;
        background-color: @ssd_grey;
        height: 28px;
        line-height: 100%;
        margin-bottom: 4px;
        padding: 8px;
        background-color: white;
    }
}

#customize-control-ssd_category {
    .ssd_grid_mainitem {
        cursor: inherit;
        background-color: inherit;

        &:hover {
            color: inherit;
            font-weight: inherit;
        }
    }

    .ssd_grid_subitem {
        margin-left: @ssd_layout_column_margin;
        background-color: white;
    }
}

#customize-control-ssd_color {
    .ssd_grid_item {
        width: 100%;

        .ssd_title {
            float: left;
        }

        .ssd_color_edit {
            float: right;
            display: none;
            cursor: pointer;
            font-weight: normal;
            text-decoration: underline;
        }

        .ssd_colors {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;

             > div {
                height: 32px;
                width: 30%;
                 position: relative;
            }
        }

        .ssd_colors2 {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;

            > div {
                height: 32px;
                width: 21%;
            }
        }

        &:hover .ssd_color_edit {
            display: inherit;

            &:hover {
                font-weight: bold;
            }
        }
    }
}

.customize-control-color {
    box-sizing: content-box;
    & * {
        box-sizing: content-box;
    }

    .wp-picker-input-wrap {
        display: block;
    }

    .iris-border .iris-picker-inner {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .iris-border .iris-palette-container {
        bottom: 20px;
        left: 0;
    }

    .iris-picker .iris-square {
        margin-right: 10px !important;
    }

    .iris-picker.iris-border {
        border: none !important;
    }
}

.ssd_colors_item_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.ssd_area_preview {
    position: relative;
    left: 0;
    right: 0;
    padding: 16px;
    color: #5A5A5A;

    * {
        box-sizing: border-box;
    }

    > div {
        width: 100%;
    }

    .ssd_area_prev_desc {
        margin-bottom: 8px;
    }

    .ssd_area_prev_page {
        width: 100%;
        padding: 16px;
        padding-top: 6px;
        background-color: white;

        .ssd_area_prev_desc {
            width: 100%;
            text-align: center;
        }

        &.ssd_area_hover {
            background: @ssd_active_color;
            color: white;

            .ssd_area_prev_hub .ssd_area_prev_area {
                border-right-color: @ssd_active_color;
            }
        }
    }

    .ssd_area_prev_area {
        width: 100%;
        height: 24px;
        background-color: @ssd_grey;
        text-align: center;
        margin-top: 4px;
        padding: 2px;
        color: #5A5A5A;

        &.ssd_area_hover {
            background: @ssd_active_color;
            color: white;
        }
    }

    .ssd_area_prev_hub {
        .ssd_area_prev_area {
            height: 100px;
            width: 30%;
            float: left;
            border-right: white 4px solid;

            span {
                height: 100px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                width: 1%;
            }

            &:last-of-type {
                border-right: none;
            }
        }

        .ssd_area_prev_main {
            width: 40%;
        }

        &::after {
            content: '';
            display: table;
            clear: both;
        }
    }
}

// Hide the old Swifty logo option, because we switched to WP theme logo.
#customize-control-ssd_details-logo-fg_img {
    display: none !important;
}

.ssd_demo_switch_wrapper {
    input {
        width: initial !important;
    }
}

.wp-full-overlay-footer {
    //height: initial !important;

    .ssd_demo_switch_wrapper {
        //padding: 14px;
        //min-height: 64px;
        position: absolute;
        right: 8px;
        top: 4px;
        padding: 0;
    }
}

.ssd_button {
    height: 48px;
    line-height: 48px;
    background-color: @ssdGray2;
    color: @ssdGray4;
    //margin-top: 16px;
    width: 100%;
    text-align: center;

    cursor: pointer;

    &:hover {
        background-color: darken(@ssdGray2, 10%);
    }
}

