//@import "../../../abstracts/abstracts";

// Set variables
$sidepanel-width-extra-small: 20%;
$sidepanel-width-small: 30%;
$sidepanel-width-medium: 40%;
$sidepanel-width-large: 50%;
$sidepanel-bar-size: 40px;
$sidepanel-submenu-height: $nav-tabs-container-height;
$sidepanel-background-color: $color-layer-2; //color(gray-8); // to-do: create a general color for this layer
$sidepanel-border-color: $global-border-color;
$sidepanel-header-color: color(text-color-default);
$sidepanel-text-color: color(text-color-default);
$nav-tabs-text-color: $color-white;

// Sidepanel parent in order to split the FolderDocumentClassList and Sidepanel
.dbqdcltg-has-sidepanel,
.dbqdclc-has-extended-sidepanel {
    display: flex;

    // Different sizes
    // SidepanelSizeRatio = {
    //   FixedLarge: 2,
    //   FixedMedium: 1,
    //   FixedSmall: 0
    // };
    &[data-size-ratio="0"] {
        .dbqdcltg-main-panel,
        .dbqdclc-extended-main-panel {
            width: calc(100% - #{$sidepanel-width-small});
        }
        .dbqdcltg-sidepanel,
        .dbqdclc-extended-sidepanel {
            width: $sidepanel-width-small;
        }
    }
    &[data-size-ratio="1"] {
        .dbqdcltg-main-panel,
        .dbqdclc-extended-main-panel {
            width: calc(100% - #{$sidepanel-width-medium});
        }
        .dbqdcltg-sidepanel,
        .dbqdclc-extended-sidepanel {
            width: $sidepanel-width-medium;
        }
    }
    &[data-size-ratio="2"] {
        .dbqdcltg-main-panel,
        .dbqdclc-extended-main-panel {
            width: calc(100% - #{$sidepanel-width-large});
        }
        .dbqdcltg-sidepanel,
        .dbqdclc-extended-sidepanel {
            width: $sidepanel-width-large;
        }
    }

    .dbqdcltg-main-panel,
    .dbqdclc-extended-main-panel {
        width: calc(100% - #{$sidepanel-width-medium}); // Default size. Size will be overruled by control.
        z-index: 1; // z-index set heigher than the sidepanel so the mainpanel dropdown list items wont't hide behind the sidepanel

        &[data-is-collapsed="true"] {
            width: calc(100% - (#{$sidepanel-bar-size} + #{$padding-default}));
        }
    }

    .dbqdcltg-sidepanel,
    .dbqdclc-extended-sidepanel {
        width: $sidepanel-width-medium; // Default size. Size will be overruled by control.
        z-index: 2;

        &[data-is-collapsed="true"] {
            width: $sidepanel-bar-size;

            .dbqdclsp-container {
                .dbqdclsp-header-container {
                    .dbqdclsp-header-main-menu-container {
                        flex-direction: column;
                        height: 100%;
                        border-radius: $border-radius-default;
                        z-index: 14 !important;

                        .dbqdclsp-header-title-container {
                            .dbqdclsp-collapse-button {
                                transform: rotate(180deg);
                            }

                            .dbqdclsp-title {
                                display: none;
                            }

                            .dbqdclsp-full-screen-button {
                                display: none;
                            }
                        }

                        .dbqdclsp-header-tab-bar-container {
                            flex-direction: column;
                            width: $sidepanel-bar-size;
                            height: calc(100% - #{$sidepanel-bar-size});
                            border-radius: 0 0 $border-radius-default $border-radius-default;
                        }
                    }
                }

                .dbqdclsp-content-container {
                    display: none;
                }
            }
        }

        &[data-is-collapsed="false"] {
            .dbqdclsp-container {
                min-height: 400px;
            }
        }
    }

    &.dbqdcltg-sidepanel-is-fullscreen {
        .dbqdcltg-main-panel,
        .dbqdclc-extended-main-panel {
            display: none;
        }

        .dbqdcltg-sidepanel,
        .dbqdclc-extended-sidepanel {
            width: 100%;
            margin-left: 0;
        }
    }
}

.dbqdcltg-has-sidepanel {
    gap: 15px;
}

.dbqdclc-has-extended-sidepanel {
    .dbqdclc-extended-main-panel {
        &.dbqdclc-extended-main-panel-is-hidden {
            display: none;
        }
    }

    .dbqdclc-extended-sidepanel {
        margin: 0 0 $margin-default 0;

         &.dbqdclc-extended-sidepanel-is-fullscreen {
            width: 100%;
            margin: $margin-default;
         }
    }
}

// Sidepanel
.dbqdclsp-container {
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 12;
    display: inline-block;
    position: relative;
    clear: both;
    margin: 0;
    padding: 0;//($padding-default / 2) 0;
    font-family: $font-family-default;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: $border-radius-default;
    border: 1px solid $sidepanel-border-color;
    background-color: $sidepanel-background-color;

    &[data-is-loading="true"] {
        min-height: (100 + ($padding-default * 2));
    }

    .dbqdclsp-header-container {
        display: flex;
        flex-direction: column;

        .dbqdclsp-header-main-menu-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: $sidepanel-bar-size;
            border-radius: $border-radius-default $border-radius-default 0 0;
            border-bottom: 1px solid $sidepanel-border-color;
            //background-color: $sidepanel-background-color;
            color: $sidepanel-header-color;

            // Position: relative is set so the z-index will have an effect
            // The z-index is required, otherwise dropdown menu's might fall behind the content of a sidepanel item
            position: relative;
            z-index: 2;

            .dbqdclsp-header-title-container {
                display: flex;
                align-items: center;
                min-width: 0; // min-width: 0 is required in order to truncate the title when it becomes too long

                .dbqdclsp-collapse-button,
                .dbqdclsp-full-screen-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    margin: 5px;
                    width: ($sidepanel-bar-size - 10px);
                    height: ($sidepanel-bar-size - 10px);
                    border-radius: 50%;

                    svg {
                        fill: $sidepanel-header-color; 
                    }

                    &:hover:not(.disabled) {
                        svg {
                            fill: $color-primary !important;
                        }
                    }

                    &:hover:not(.disabled) {
                        color: $button-background-color;
                        border: 1px solid rgba(255, 255, 255, 0.1);

                        svg {
                            fill: $button-background-color !important;
                        }
                    }

                    &.disabled {
                        cursor: not-allowed;

                        svg {
                            opacity: 0.50;
                        }
                    }
                }

                .dbqdclsp-full-screen-button {
                    svg {
                        width: $svg-icon-size;//20px;
                        height: $svg-icon-size;//20px;
                    }
                }

                .dbqdclsp-title {
                    font-size: $font-size-medium;
                    font-weight: 500;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .dbqdclsp-header-tab-bar-container {
                display: flex;
                height: $sidepanel-bar-size;
                padding: 5px;
                //background-color: $nav-tabs-background;
                color: $nav-tabs-text-color;

                .dbqdclsp-tab-bar-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    background: none;
                    border: none;
                    outline: 0;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    padding: 6px;
                    cursor: pointer;
                    background: transparent; //$nav-tabs-tile-background;
                    border: 1px solid transparent; //$nav-tabs-tile-background;

                    .dbqdclsp-tab-bar-item-counter {
                        @include alert-badge;
                        position: absolute;
                        top: -6px;
                        right: -5px;
                        padding: 2px 3px;
                        text-align: center;
                        font-size: 10px;
                    }

                    svg {
                        fill: $sidepanel-header-color; 
                        width: $svg-icon-size;//20px;
                        height: $svg-icon-size;//20px;
                    }

                    &.dbqdclsp-active:not(.disabled),
                    &:hover:not(.disabled) {
                        color: $color-primary;

                        svg {
                            fill: $color-primary !important;
                        }
                    }

                    &.dbqdclsp-active:not(.disabled),
                    &:hover:not(.disabled) {
                        color: $button-background-color;
                        //border: 1px solid color(primary-tone, 80);
                        background: $color-subtle;

                        svg {
                            fill: $color-primary !important;
                        }
                    }

                    &.disabled {
                        cursor: not-allowed;

                        svg {
                            opacity: 0.50;
                        }
                    }

                    &.dbqdcl-hidden {
                        display: none;
                    }
                }

                .dbqdcl-dropdown {
                    width: 30px;
                    height: 30px;
                    cursor: pointer;

                    .dbqdcl-dropdown-toggle {
                        width: 30px;
                        height: 30px;
                        padding: 3px;

                        svg {
                            fill: $sidepanel-header-color;
                        }

                        &:hover {
                            svg {
                                fill: $color-primary !important;
                            }
                        }
                    }

                    .dbqdcl-dropdown-menu {
                        .dbqdcl-dropdown-menu-item {

                            &.disabled {
                                cursor: not-allowed;
                                opacity: 0.50;

                                a:hover {
                                    cursor: not-allowed;
                                }

                                svg {
                                    opacity: 0.50;
                                }
                            }
                        }
                    }
                }
            }
        }
        
        .dbqdclsp-header-submenu-container {
            display: none;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0 $global-padding;
            margin: 0;
            gap: $global-margin;
            background: $nav-tabs-container-background-color;
            width: 100%;
            border: 0;
            border-radius: $border-radius-default $border-radius-default 0 0;
            // @include custom-scrollbar(false, 'small');
            @include scrollbar;

            .dbqdclsp-submenu-item {
                cursor: pointer;
                margin: 0;
                border: none;
                border-radius: 0px;
                height: $sidepanel-submenu-height;
                display: flex;
                align-items: center;
                justify-content: center;

                .dbqdclsp-submenu-item-content {
                    padding: 4px 10px;
                    border-radius: 15px;
                    min-width: max-content;

                    a {
                        white-space: nowrap;
                        float: unset;
                        font-size: $font-size-base;
                        font-weight: $font-weight-default;
                        text-decoration: none;
                        text-align: center;
                        display: inline-flex;
                        flex-direction: column;
                        color: $nav-tabs-tile-default-text-color;

                        &::after {
                            content: attr(data-name);
                            content: attr(data-name) / "";
                            height: 0;
                            visibility: hidden;
                            overflow: hidden;
                            user-select: none; 
                            pointer-events: none;
                            font-weight: $font-weight-bold;

                            @media speech {
                                display: none;
                            }
                        }
                    }

                    svg {
                        fill: $nav-tabs-tile-default-text-color; 
                    }
                }

                &[data-is-hovering-submenu="true"],
                &.dbqdclsp-submenu-item-active,
                &.dbqdclsp-submenu-item-active:hover,
                &:hover {
                    background: transparent !important;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                            
                }

                &.dbqdclsp-submenu-item-active,
                &:hover {
                    border-bottom: 0;

                    .dbqdclsp-submenu-item-content {
                        background: $nav-tabs-tile-hover-background-color;

                        > a {
                            color: $nav-tabs-tile-hover-text-color !important;
                            font-weight: $font-weight-bold;
                        }
                    }
                }

                &.dbqdclsp-submenu-item-active:hover {
                    .dbqdclsp-submenu-item-content {
                        background: $nav-tabs-tile-active-background-color;
                    }
                }
            }
        }
    }

    .dbqdclsp-content-container {
        display: flex;
        width: 100%;
        height: calc(100% - #{$sidepanel-bar-size});
        overflow: hidden;
        position: relative;

        .dbqdclsp-item {
            width: 100%;

            #classlist-dashboard-container,
            #classlist-dashboard-header, 
            #classlist-dashboard-footer {
                padding: 0;
            }

            .dbq-document {
                height: 100%;

                main {
                    height: 100%;
                }

                .dbqdb-header {
                    border-color: $sidepanel-border-color;
                }

                .document-topic-tabs {
                    padding: 0 10px !important;
                }

                .dbq-form {
                    width: 100%; // Width 100% is important in case a translation control is also visible
                    overflow-y: auto;
                    @include scrollbar($sidebar-background, 0, $sidebar-scrollbar-thumb-color, $sidebar-scrollbar-thumb-color-hover, $sidebar-scrollbar-width, true);

                    .topic {
                        section {
                            padding: $padding-default;
                        }
                    }

                    > div[data-topic-type-code="Dashboard"] {
                        .flex-item-1.dbq-column {
                            padding: 0 0 10px 0;
                        }
                    }
                }
            }

            // Sidepanel type 0 = FolderDocumentClassList, 1 = DocumentClassFunction
            &[data-sidepanel-type="0"] {
                padding: ($padding-default / 2) 0;
                overflow-y: auto;
                @include scrollbar;
            }
        }

        .modal-dialog-loading {
            height: 100% !important;
        }
    }

    &[data-has-visible-submenu="true"] {
        .dbqdclsp-header-submenu-container {
            display: flex;
        }

        .dbqdclsp-content-container {
            height: calc(100% - #{$sidepanel-bar-size} - #{$sidepanel-submenu-height});
        }
    }

    .dbqdb-sidepanel-footer-buttons {
        border-top: 1px solid $sidepanel-border-color;
    }
}