@import '~bootstrap/scss/_functions';
@import '~bootstrap/scss/_variables';
@import '~bootstrap/scss/mixins/_breakpoints';
@import "assets/css/abstracts/custom-variables.scss";
@import "theme-thumbnail-styling";
@import "design-preview";

// ------------------------------------
// 	MAIN / GENERAL
// ------------------------------------

body .design-panel .small a {
    color: $blue-500;

    &:hover {
        text-decoration: underline;
        color: $blue-500;
    }
    input {
        display: none;
    }
}

.design-panel .design-row {
    @include media-breakpoint-up(lg) {
        min-height: 550px;
    }
}

.layout-select {
    max-width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    @include media-breakpoint-up(md) {
        max-width: 305px;
    }
}

// ------------------------------------
// CUSTOM STYLE RADIO BUTTON
// ------------------------------------
.style-picker {
    input[type="radio"] {
        visibility:hidden;
        display: none;
    }

    > .style-picker-label {
        margin-right:8px;
    }

    .style-picker-item, .menu-style-picker{
        padding: 11px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid $gray-200;
        margin-bottom: 10px;

        ion-icon {
            color: $gray-600;
        }

        svg {
            vertical-align: middle;
            margin-right:10px;
        }

        label {
            font-weight:normal;
            margin-bottom: 0px;
            margin-right:5px;
        }

        &:hover {
            background-color: $gray-200;
            border-color: $gray-600;
            svg #shape {
                fill: $gray-500;
            }
            svg #border {
                stroke: $gray-500;
            }
        }

        &_small {
            padding: 6px;
            font-size: 85%;
        }
    }
}

// ------------------------------------
// MENU LAYOUT RADIO BUTTON CHECKED ---
// ------------------------------------
input:checked + .menu-style-picker {
    padding: 10px;
    border: 2px solid $blue-500;
    background: $gray-100;

    &:hover {
        border-color: $blue-500;

        svg #outer {
            stroke: $blue-500;
        }
        svg #inner{
            stroke: $blue-500;
        }
    }

    svg #outer {
        stroke: $blue-500;
    }

    svg #inner {
        stroke: $blue-500;
    }

    ion-icon {
        color: $blue-500;
    }
}

// ------------------------------------
// STYLE RADIO BUTTON CHECKED ---------------
// ------------------------------------
input:checked + .style-picker-item  {
    padding: 10px;
    border: 2px solid $blue-500;
    background: $gray-100;

    &:hover {
        border-color: $blue-500;

        svg #shape {
            fill: $blue-500;
        }

        svg #border {
            stroke: $blue-500;
        }
    }

    svg #shape {
        fill: $blue-500;
    }

    svg #border {
        stroke: $blue-500;
    }

    &_small {
        padding: 5px;
        font-size: 85%;
    }
}

// ------------------------------------
// 	APPEARANCE TAB
// ------------------------------------
//Font picker styles
//Novelty fonts optgroup
li[aria-label="Novelty"] {
    .select2-results__group {
        background-color: $gray-200;
    }

    .select2-results__options--nested {
        background: $gray-100;
    }
}

// Header styles
.panel-styles {
    input[type="radio"] {
        visibility:hidden;
    }

    .panel-styles-item{
        padding: 11px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #ddd;
        margin-bottom: 10px;

        &:hover {
            background-color: #f6f6f6;
            border-color: #adadad;
        }

        &--selected{
            padding: 10px;
            border: 2px solid $blue-500;
            background: #eff6fe;

            &:hover {
                border-color: $blue-500;
            }
        }
    }

    .panel {
        margin-bottom:5px;
    }

    .panel-header-style .card-title {
        color: inherit;
        font-weight: normal;
    }

    .panel-heading--default {
        background: #f5f5f5;
        border-color: #ddd;
        color: #333;
    }

    .panel-heading--white {
        background: #fff;
        border-color: #ddd;
        color: #292929;
    }
}


// ------------------------------------
// 	INTERFACE & NAVIGATION
// ------------------------------------
// 	LOGO BACKGROUND
.logo-background {
    padding: 10px 0;
}

// 	LOGO IMAGE
.logo-background .logo-image{
    background-image: linear-gradient(45deg, $gray-400 25%, transparent 25%), linear-gradient(-45deg, $gray-400 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $gray-400 75%), linear-gradient(-45deg, transparent 75%, $gray-400 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    max-width: 100%;
    max-height: 60px;
}

// 	NAVBAR HIDE ITEM
.hide-items-wrapper  {
    display: inline-flex;
    align-items: baseline;
    justify-content: left;
    width: 100%;
    flex-wrap: wrap;

    .hide-items-item {
        margin: 2px;
        padding: 0;
        justify-content: space-around;
        width: 68px;

        .hide-items-item__label {
            display: flex;
            flex-direction: column;

            .status {
                font-weight: normal;
                font-size: 12px;
                text-align: center;
                display: block;
            }
            .label-hidden {
                display:none;
            }
        }

        em {
            display: block;
            line-height: 1;
        }
        ion-icon {
            position: relative;
            margin: 0px 9px;
            padding: 15px;
            font-size: 20px;
            cursor: pointer;
            border-radius: 5px;
            background: #eff6fe;
            color: $blue-500;
            border: 2px solid $blue-500;
            text-align: center;
            display: block;
        }
    }

    .hide-items-item__input {
        display: none;
        &:checked + ion-icon{
            color: #979797;
            background: #fff;
            border: 1px solid #dddddd;
            margin: 1px 10px;
            &:hover {
                background-color: #f6f6f6;
                border-color: #8c8c8c;
            }
        }
        &:checked ~ .label-shown {
            display: none;
        }
        &:checked ~ .label-hidden {
            display: block;
        }
    }
}

// 	GRADIENT PICKER
.nav-gradient .gradient-color-right {
    margin-right: 32px;
}


.layout-select {
    max-width: 230px;
}

// ------------------------------------
// 	THEME LIST
// ------------------------------------
.themes-table__container {
    @media only screen and (max-width : 992px) {
        overflow-x: auto;
    }
}

.current-theme-label {
    font-size: 60%;
    padding: .3em .6em;
    vertical-align: middle;
}

.themes-table {
    .drag-handle {
        vertical-align: top;
        cursor: move;
        @media only screen and (max-width: 767px) {
            display: none;
            cursor: default;
        }
    }

    .themes-table__theme-image {
        .theme-image {
            max-width:150px;
            @media only screen and (max-width: 767px) {
                max-width:(150px / 2);
            }
            @media only screen and (max-width: 320px) {
                display:none;
            }
        }
        @media only screen and (max-width: 320px) {
            display:none;
        }
    }

    @media only screen and (max-width: 767px) {
        > thead,
        > tbody,
        > tfoot {
            > tr {
                > th,
                > td {
                    padding: 5px;
                }

            }

        }
    }
}

//Utility Page

.utility-report {
    max-height: 150px;
    overflow-y: scroll;
    padding: 6px 12px;
}


// Sortable theme list
.ui-sortable-helper {
    background: white;
    > td {
        border-top: 0 !important;
    }
}


// ------------------------------------
// 	DEMO TAB STYLING
// ------------------------------------

.browser-panel {
    background: #F6F6F8;
}

// ------------------------------------
// 	APPLCATION MENU PREVIEW STYLING
// ------------------------------------

.style-picker__utilities {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;

    svg {
        margin-bottom: 10px;
    }

    label {
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
        -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-align-self: auto;
        -ms-flex-item-align: auto;
        align-self: auto;
        width:calc((100% - 5%)/4);
        @media only screen and (max-width: 980px) {
            width:calc((100% - 5%)/3);
        }
        @media only screen and (max-width: 480px) {
            width:calc((100% - 5%)/2);
        }
    }

    p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height:18px;
        height: 36px;
        margin-bottom:0;
    }
}

.theme-info-panel {
    @media only screen and (max-width: 480px) {
        overflow-x: auto;
    }
}
