
// ------------------------------------
// 	DESIGN PANEL CONTAINER
// ------------------------------------
.main-container {
    overflow: initial !important;
}

// ------------------------------------
// 	DESIGN PREVIEW
// ------------------------------------

// General styling

// preview block text
.preview-block-text {
    height: 5px;
    display: block;
    border-radius: 350px;
    background: $gray-500;
}

$preview-font-size: 0.8rem;

// Design preview panel structure and page placement
.design-panel .design-preview-wrapper {
    padding: 0.5rem;
    margin: 0 auto;
    top: 105px;
    z-index: 5;
    font-size: $preview-font-size;
    max-width: 756px;
}


// Design preview panel structure on mobile
.design-panel .design-preview-wrapper.phone-layout {
    padding: 10px 0 0;
    width: 264px;
    margin: auto;
}


// Design preview header and browser tab
.design-preview-header {
    background-color: $gray-300;
    border: 1px solid $gray-300;
    border-bottom: none;
    display: flex;
    flex-direction: row;
    align-items: center;

    // Styling of preview browser tab
    .design-preview-browser-tab {
        background-color: $gray-100;
        border-radius: .25rem .25rem 0 0;
        padding: .4rem .8rem;
        align-self: end;


        .design-preview-favicon {
            width: 16px;
            margin-right: 7px;
        }
    }

    // Styling of preview browser tab plus button which sits to the right of the browser tab
    .design-preview-add-browser-tab {
        margin-left: 4px;
        margin-top: 7px;
        width: 23px;
        height: 23px;
        border-radius: 0.25rem;
        background-color: $gray-200;
    }

    // Custom styling of device toggle buttons
    .design-preview-device-pills .design-preview-nav-pills {
        margin-bottom: 0;

        .nav-link {
            padding: 0.3rem;
            border-bottom: none;
            border-radius: 0.25rem;
        }
    }
}


// Styling of tab content wrapper
.design-preview-tab-content {
    border: 1px solid $gray-200;
    border-top: none;
}

// Fixed container width
.design-preview-container {
    max-width: 550px;

    // Fixed container in full width mode
    &.full-width {
        max-width: 100%;
    }
}

// Design panel preview corner styling
.design-preview-corner-style {
    border-radius: 0;

    &.has-rounded-corners {
        border-radius: 0.25rem;
    }
}

// Design preview navbar
.design-panel .design-preview-navbar {
    position: relative;
    height: 40px;
    padding: 0 0.5rem;

    .navbar-inner {
        display: flex;
        align-items: center;
        display: flex;
        justify-content: space-between;
        height: 100%;
        margin: 0 auto;
    }

    // Navbar menu toggle - sidebar mode
    .navbar-side-menu-icon {
        height: 15px;
        position: relative;

        .nav-toggle-bar {
            height: 3px;
            position: absolute;
            border-radius: 4px;

            &:first-child {
                top: 0;
                width: 14px;
            }

            &:nth-child(2) {
                top: 6px;
                width: 17px;
            }

            &:nth-child(3) {
                bottom: 0;
                width: 11px;
            }
        }
    }

    // Navbar client logo
    .navbar-logo-image-wrapper {
        padding: 3px 0;
        height: 28px;
    }

    .navbar-logo-image {
        max-width: 200px;
        max-height: 100%;

        &.logo-image-mobile {
            max-width: 160px;
        }

        &.logo-image-sidebar-mode, &.logo-image-mobile {
            margin-right: auto;
            margin-left: 30px;
        }
    }

    // Navbar search bar
    .navbar-search-bar {
        display: inline-flex;
        align-items: center;
        margin-right: 10px;
        height: 25px;
        width: 140px;
        border-radius: 10rem;
        background: rgba(0,0,0,.04);

        > .search-icon {
            font-size: 1rem;
        }

        .preview-block-text {
            width: 25px;
        }
        .preview-block-text, .search-icon {
            margin-left: 4px;
        }
    }

    // Right hand section of the design preview navbar
    .navbar-right-section {
        display: inline-flex;
        align-items: center;

        ion-icon {
            font-size: 0.9rem;
            margin-right: 12px;

            &.mobile {
                margin-right: 0;
                font-size: 1.3rem;
            }
        }

        .profile-img {
            height: 20px;

            &.circle {
                border-radius: 10rem;
            }
            &.rounded {
                border-radius: 5px;
            }
            &.square {
                border-radius: 0px;
            }
        }
    }
}


//menu
.design-preview-main-menu {
    height: 29px;
    width: 100%;
    padding: 0 10px;

    .design-preview-main-menu-inner {
        display: flex;
        align-items: center;
        height: 100%;
        margin: auto;
    }

    .preview-block-text {
        margin-left: 10px;
        width: 50px;

        &:first-child {
            margin-left: 0;
        }

        &:nth-child(2)  {
            width: 40px;
        }
        &:nth-child(3)  {
            width: 25px;
        }
        &:nth-child(5)  {
            width: 45px;
        }
    }
}



// design preview main panel and background set up
.design-preview-wrapper .preview-main-panel {
    display: flex;
    justify-content: center;
    height: 395px;
    background-position: top center;
    background-size: cover;

    &.tiled-background {
        background-size: 20vw;
    }
}

// design preview main panel in mobile mode
.design-preview-wrapper .preview-main-panel.preview-main-panel-mobile {
    height: 429px;
}

// design preview main panel inner
.preview-main-panel .preview-main-panel-inner {
    width: 100%;
    background-color: #fff;
    overflow: hidden;

    // design preview breadcrumb styling
    .preview-main-panel-breadcrumb {
        margin-bottom: 0;
        padding-left: 0;
        font-size: $preview-font-size;
    }

    // main panel side navigation items
    .preview-main-panel-nav-item {
        padding: .25rem .5rem 0.25rem 0.75rem;
        margin: .25rem;
        border-radius: .25rem;
    }

    // main panel side navigation items when active
    .preview-main-panel-nav-item.nav-item-active {
        background: #fff;
        position: relative;

        // adds left hand pill to active nav item
        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 3px;
            border-radius: 0.15rem;
            margin: 0.25rem;
        }
    }
}


// Styling of design preview cards
.design-preview-card {
    overflow: hidden;

    .design-preview-card-header {
        border-bottom: 1px solid $gray-300;
    }

    .design-preview-card-btn {
        font-size: $preview-font-size;
        padding: 0.08rem .35rem;
        transition: 0s;
        cursor: default;
    }

}

// Applies card shadow to the preview cards when set
.design-preview-card.card-has-shadow {
    box-shadow: 0 0 6px 1px rgba(black, 0.1);
}
