

// ----------------------------------------------------------
// ----- with_collapsable_info_panel.html,
// ----- with_collapsable_side_panel.html
// ----- with_two_collapsable_panels.html
// ----- templates
// ----------------------------------------------------------

$app-icon-size: 1.6rem;

$app-template-navbar-padding-y: .7rem;
$app-template-navbar-header-width: calc(18% + .36rem);

$left-panel-bg: hsl(200, 15.8%, 96.3%);

$side-panel-border-color: hsl(200, 17%, 93%);

$app-template-horizontal-border-color: $gray-300;

$right-panel-padding: 1rem;

$app-template-mobile-panel-width: 250px;
$app-template-mobile-panel-margin: -$app-template-mobile-panel-width - 10px;

//App navbar
.navbar-app-page {
    border-bottom: 1px solid $app-template-horizontal-border-color;
    padding-top: $app-template-navbar-padding-y;
    padding-bottom: $app-template-navbar-padding-y;

    //Flex options for app navbar header
    flex-wrap: nowrap;

    @media only screen and (min-width: 1010px) {
        display: flex;
        flex-wrap: nowrap;
    }

    .collapsable-btn-wrap .btn-link {
        @include media-breakpoint-only(xs) {
            padding: .375rem 0.66rem;
        }
    }
}

//App navbar header
// Module/app icon wrapper
.app-icon .app-icon-link {
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    padding: .6rem;
    border-radius: $application-icon-border-radius;
    box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.07);
    line-height: 0;
    color: var(--theme-app-color);

    // Sizing of template module/app icon
    .app-icon-svg,  span {
        font-size: $app-icon-size;
        height: $app-icon-size;
        width: $app-icon-size;
    }
}

// Admin template module/app icon
.app-icon.admin-app-icon .app-icon-link {
    color: var(--theme-admin-app-color);
}

// Hides module/app title when there is no left side panel
.navbar-app-header-title {
    display: none;
}

//App navbar button toolbar
.navbar .navbar-app-header-toolbar {
    margin: 0;
    color: $gray-700;

    &:hover {
        color: $gray-800;
    }

    @media only screen and (min-width: 1010px) {
        flex-shrink: 0;
        margin-top: 3px !important;
    }

     // Text and icon colour for buttons and dropdown menu items in the app toolbar
     .btn.btn-link, .btn.btn-link ion-icon, .dropdown-item {
        color: $gray-700;

        &:hover {
            color: $gray-800;
        }
    }
}

//App navbar variation if it has a left side panel
.has-left-menu {
    // Adds panel coloured gray background to header app wrapper - this matches with the width and color of the left side panel
    .navbar-app-header {
        width: $app-template-navbar-header-width;
        min-width: $app-template-navbar-header-width;
        background: $left-panel-bg;
        margin: (-$app-template-navbar-padding-y) 0 (-$app-template-navbar-padding-y) -1rem;
        padding: $app-template-navbar-padding-y 1rem;
        position: relative;
        white-space: nowrap;
        border-top-left-radius: $main-content-border-radius;
        // Adds slghtly darker bottom border to header app wrapper
        &::after {
            content: '';
            position: absolute;
            background: $side-panel-border-color;
            height: 1px;
            left: 0px;
            bottom: -1px;
            right: 0;
        }
        // Styling of header app text
        .navbar-app-header-title {
            vertical-align: middle;
            display: inline-block !important;
            font-size: 1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            width: calc(100% - 45px);
            a {
                color: $gray-800;
            }
        }

    }


    @media only screen and (max-width: 1010px) {
        // Removes styling of panel coloured gray background on header app wrapper when screen size is tablet or below
        .navbar-app-header {
            margin: 0;
            padding: 0;
            background: transparent;
            border: none;
            width: auto;
            min-width: auto;
            // Removes the slghtly darker bottom border in the header app wrapper when screen size is tablet or below
            &:after {
                display: none;
            }
            // removes header app text when screen size is tablet or below
            .navbar-app-header-title {
                display: none !important;
            }
        }
    }
}

//Secondary menu styling
.secondary-menu {
    padding: 10px;
    background-color: $gray-100;
    border-bottom: 1px solid $app-template-horizontal-border-color;

    h4 {
        margin: 7px;
    }

    .btn-toolbar {
        margin: 0;
    }
}

// -------------------------
// MOBILE STYLING
// -------------------------
@media only screen and (max-width: 1010px) {
    .navbar-app-page {

        // -------------------------
        // ADD ELLIPSIS TO BREADCRUMB - ON MOBILE
        // -------------------------
        .breadcrumb-wrapper {
            max-width: 100%;

            .breadcrumb {
                > .breadcrumb-item {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    vertical-align: middle;
                    font-weight: bold;
                    & + li {
                        display: none;
                    }

                    &:last-child {
                        width: 100%;
                        font-size: 16px;
                        display: block;
                        padding: 0;
                    }

                    &:first-child:not(:last-child) {
                        font-size: 0.8rem;
                        display: block;
                        a {
                            font-weight: bold;
                        }
                    }

                    &:before {
                        display: none;
                    }

                }
            }
        }
    }
}

// -------------------------
// APP MAIN PANEL
// -------------------------
.app-main-panel {
    padding: 1rem;

    // add this class to the template's HTML for the light background variant like so:
    // <args key="app_main_panel.+class" value="app-main-panel-bg-light">
    &.app-main-panel-bg-light {
        background: $gray-150;
        flex-grow: 1;
        border-radius: 0 0 var(--theme-rounded-corners) var(--theme-rounded-corners);
    }
}



// -------------------------
// PAGE CONTAINER STYLING - ADDS OVERFLOW HIDDEN TO CONCEAL SIDE MENUS
// -------------------------

.page-container {
    min-height: 100%;
    position: relative;
}

.collapsable-panel-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    min-height: 600px;
    flex-wrap: nowrap;
}

// -------------------------
// PAGE STRUCTURE - DESKTOP
// -------------------------
.collapsable-info-panel,
.page-main-content,
.collapsable-side-panel {
    float: left;
}

// --------
// MAIN PANEL WIDTH
// --------
.page-main-content {
    width: 82%;
    padding: 1rem;
}


// --------
// INFO (LEFT) PANEL WIDTH
// --------
.collapsable-info-panel {
    width: 18%;
    overflow: auto;
    background: $left-panel-bg;
    border-bottom-left-radius: $main-content-border-radius;
}

// --------
// SIDE (RIGHT) PANEL WIDTH
// --------
.collapsable-side-panel {
    width: 23%;
    overflow: auto;
    padding: $right-panel-padding;
    border-left: 1px solid $side-panel-border-color;
    background: #fff;
    border-bottom-right-radius: $main-content-border-radius;

    hr {
        border-color: $side-panel-border-color;
        margin-left: -$right-panel-padding;
        margin-right: -$right-panel-padding;
    }
}

//full width mode
.full-width-mode .collapsable-side-panel {
    width: 25%;
}
// --------
// MAIN PANEL WHEN BOTH LEFT AND RIGHT PANELS ARE IN PLACE
// --------
.page-container.universal-panels {
    .page-main-content {
        width: 100%;
    }
    .collapsable-side-panel, .collapsable-info-panel {
        width: 30%;
    }
}

// --------
// MAIN PANEL WHEN BOTH LEFT AND RIGHT PANELS ARE IN PLACE
// --------
.page-container.has-both-panels {
    .page-main-content {
        width: 59%;
    }
}

//full width mode
.full-width-mode .page-container.has-both-panels {
    .page-main-content {
        width: 57%;
    }
}

// -------------------------
// MOBILE MENU STYLING (HIDES IT ON DESKTOP)
// -------------------------
.page-menu {
    display: none;
    padding: 10px 15px;
    background: $left-panel-bg;
    &::after {
        content: '';
        height: 0;
        clear: both;
        display: block;
    }
    // --------
    // POINTER STYLE ON MENU BUTTONS
    // --------
    .page-nav-toggle {
        cursor: pointer;
    }
}


// -------------------------
// GENERAL HAMBURGER STYLING
// -------------------------
.hamburger {
    position: relative;
    height: 15px;
    width: 15px;
    display: inline-block;
    vertical-align: middle;
}


// -------------------------
// CATEGORIES/LEFT SIDE MENU ICON STYLING
// -------------------------
.categories-toggle {
    .page-nav-title {
        margin-left: 5px;
    }
    .hamburger {
        // --------
        // HAMBURGER BAR STYLING
        // --------
        .bar {
            width: 11px;
            height: 2px;
            background: #000;
            position: absolute;
            left: 0;
            right: 0;
            border-radius: 3px;
            transition: 0.3s;
            &:nth-child(1) {
                top: 1px;
            }
            &:nth-child(2) {
                top: 6px;
                width: 8px;
            }
            &:nth-child(3) {
                top: 11px;
            }
        }
        // --------
        // HAMBURGER ARROW STYLING
        // --------
        &::after, &::before {
            content: '';
            height: 2px;
            width: 7px;
            background: #000;
            position: absolute;
            right: -1px;
            border-radius: 3px;
            transition: 0.3s;

        }
        // --------
        // HAMBURGER ARROW STYLING - TOP SECTION
        // --------
        &::before {
            transform: rotate(-45deg);
            top: 4px;
        }
        // --------
        // HAMBURGER ARROW STYLING - BOTTOM SECTION
        // --------
        &::after {
            transform: rotate(45deg);
            top: 8px;
        }
    }
}

// -----------
// CATEGORIES/LEFT SIDE MENU ICON STYLING - ON HOVER
// ------------
.categories-toggle:hover .hamburger {
    &::after, &::before {
        margin-right: -1px;
    }
}

// -----------
// CATEGORIES/LEFT SIDE MENU ICON STYLING - WHEN ACTIVE/OPEN
// ------------
.open-categories-menu .categories-toggle {
    .hamburger {
        .bar {
            transition: 0.3s;
            &:nth-child(1) {
                transform: rotate(45deg);
            }
            &:nth-child(2) {
                visibility: hidden;
                opacity: 0;
            }
            &:nth-child(3) {
                transform: rotate(-45deg);
            }
            &:nth-child(1), &:nth-child(3) {
                top: 6px;
                width: 14px;
            }
        }
        &::after, &::before {
            margin-right: 5px;
            transition: 0.3s;
            opacity: 0;
        }
    }
}

// -------------------------
// OPTIONS/RIGHT SIDE MENU ICON STYLING
// -------------------------
.options-toggle {
    .page-nav-title {
        margin-right: 5px;
    }
    .hamburger {
        // --------
        // HAMBURGER ARROW STYLING
        // --------
        .bar {
            width: 14px;
            height: 2px;
            background: #000;
            position: absolute;
            left: 0;
            right: 0;
            border-radius: 3px;
            transition: 0.3s;
            // --------
            // SLIDER STYLING ON OPTIONS BARS
            // --------
            &::after {
                content: '';
                background: #000;
                height: 4px;
                width: 2px;
                position: absolute;
                margin-top: -1px;
                left: 4px;
                box-shadow: -0.8px 0px 0px 0px #fff;
                transition: 0.3s;
            }
            &:nth-child(1) {
                top: 1px;
                // --------
                // POSITION OF SLIDER STYLING - BAR 1
                // --------
                &::after {
                    left: 3px;
                }
            }
            &:nth-child(2) {
                top: 6px;
                // --------
                // POSITION OF SLIDER STYLING - BAR 2
                // --------
                &::after {
                    left: 7px;
                }
            }
            &:nth-child(3) {
                top: 11px;
                // --------
                // POSITION OF SLIDER STYLING - BAR 3
                // --------
                &::after {
                    left: 10px;
                }
            }
        }
    }
}

// -------------
// OPTIONS/RIGHT SIDE MENU ICON STYLING - ON HOVER
// -------------
.options-toggle:hover .hamburger .bar {
    &:nth-child(1)::after {
        left: 10px;
    }
    &:nth-child(2)::after {
        left: 8px;
    }
    &:nth-child(3)::after {
        left: 3px;
    }
}

// -------------
// OPTIONS/RIGHT SIDE MENU ICON STYLING - WHEN ACTIVE/OPEN
// -------------
.open-options-menu .options-toggle .hamburger .bar {
    transition: 0.3s;
    &:nth-child(1) {
        transform: rotate(45deg);
    }
    &:nth-child(2) {
        visibility: hidden;
        opacity: 0;
    }
    &:nth-child(3) {
        transform: rotate(-45deg);
    }
    &:nth-child(1), &:nth-child(3) {
        top: 6px;
        width: 14px;
    }
    &::after {
        visibility: hidden;
        opacity: 0;
        transition: 0.3s;
    }
}

@media only screen and (max-width: 1010px) {

    // -------------------------
    // Allows scrolling within the page container
    // when the mobile menu display kicks in.
    // -------------------------
    .page-container {
        overflow-y: auto;
        overflow-x: hidden;
    }

    // -------------------------
    // DISPLAYS MENU - WHEN SCREEN IS UNDER 1010px
    // -------------------------
    .page-menu {
        display: block;
    }

    // -------------------------
    // STYLING OF INFO & SIDE PANELS - ON MOBILE
    // -------------------------
    .page-container .collapsable-panel-row {
        .collapsable-info-panel, .collapsable-side-panel {
            position: absolute;
            top: 0;
            z-index: 50;
            box-shadow: 0 15px 10px 10px hsla(0, 0%, 0%, 0.04);
            bottom: 0;
            width: $app-template-mobile-panel-width;
            transition: 0.3s;
        }

        .collapsable-info-panel {
            margin-left: $app-template-mobile-panel-margin;
            left: 0;
        }

        .collapsable-side-panel {
            margin-right: $app-template-mobile-panel-margin;
            right: 0;
        }
    }


    // -------------------------
    // STYLING OF MAIN PANEL - ON MOBILE
    // -------------------------
    .page-container.page-container .page-main-content,
    .full-width-mode .page-container.page-container .page-main-content {
        width: 100%;
    }

    .page_content.open-categories-menu {
        // -------------------------
        // STYLING OF INFO PANEL - ACTIVE/OPEN
        // -------------------------
        .collapsable-info-panel {
            margin-left: 0;
            transition: 0.3s;
        }
    }

    .page_content.open-options-menu {
        // -------------------------
        // STYLING OF SIDE PANEL - ACTIVE/OPEN
        // -------------------------
        .collapsable-side-panel {
            margin-right: 0;
            transition: 0.3s;
        }
    }
}

// ADMIN SPECIFIC NAV PILL STYLING WHEN ACTIVE
.admin-template .collapsable-info-panel .flex-column > .nav-item.active > .nav-link {
    color: $gray-800;
    // Line to left of active pill
    &::before {
        background: $gray-800;
    }
}

// App to admin button styling
.admin-to-app-button {
    .app-icon-link {
        padding: .4rem .75rem;
        border-radius: $application-icon-border-radius;
        border: 1px solid $gray-200;
        display: block;

        &:hover {
            background: $gray-200;
        }


        .app-icon-svg {
            font-size: 1.5rem;
            vertical-align: middle;
        }

    }
}
