@import "/./src/assets/scss/breakpoints.scss";

.mat-dialog-container {
    .pop-element & {
        border-radius: 5px 0 0 5px;
        padding-bottom: 150px;
        height: auto;
        width: 1180px;
        
        @include respond-below('xl') {
            width: 90vw;
            max-width: 1180px;
        }
        
        @include respond-below('md') {
            width: 100vw;
            height: auto;
            border-radius: 0;
            padding-bottom: 100px;
        }
    }

    .pop-report & {
        width: 778px;
        height: auto;
        padding-bottom: 0;
        margin: 200px 0 0 284px;

        @include respond-to('md') {
            margin-top: 100px;
        }
        
        @include respond-below('md') {
            width: 95vw;
            max-width: 778px;
            margin: 50px auto 0;
        }
        
        @include respond-below('sm') {
            width: 100vw;
            margin: 20px 0 0;
            border-radius: 0;
        }
    }

    .pop-element.pop-report & {
        width: 1180px;
        margin: 0;
        
        @include respond-below('xl') {
            width: 90vw;
            max-width: 1180px;
        }
        
        @include respond-below('md') {
            width: 100vw;
        }
    }
}

.full-h-pop {
    width: 542px;
    height: 100vh;
    
    @include respond-below('md') {
        width: 100vw;
    }
    
    @include respond-below('sm') {
        width: 100vw;
        height: 100vh;
    }

    .mat-dialog-container {
        border-radius: 5px 0 0 5px;
        padding-bottom: 150px;
        height: 100vh;
        width: 100%;
        
        @include respond-below('md') {
            border-radius: 0;
            padding-bottom: 100px;
        }
        
        @include respond-below('sm') {
            padding: 20px;
            padding-bottom: 80px;
        }
    }
}

// Styles spécifiques pour les panneaux d'édition
.cdk-overlay-pane {
    &.full-h-pop {
        @include respond-below('md') {
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            left: auto !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: none !important;
            max-height: none !important;
        }
    }
}

.cdk-overlay-container {
    .pop-element &, .pop-in & {
        top: 200px;
        @media only screen and (min-width: $medium) {
            top: 115px;
        }
    }

    .no-tabs-page & {
        top: 150px;
        @media only screen and (min-width: $medium) {
            top: 95px;
        }
    }

    .pop-element.pop-report & {
        > div {
            &:nth-of-type(4) {
                .mat-dialog-container {
                    width: 600px;
                    height: auto;
                    padding-bottom: 0;
                    border-radius: 5px;
                    margin-right: calc((69vw - 600px)/2);
                    @media only screen and (min-width: $large-screen) {
                        margin-right: 290px;
                    }
                }
            }

            &:nth-of-type(2) {
                .cdk-overlay-pane {
                    height: 100vh;
                }
            }
        }
    }
}

.cdk-global-overlay-wrapper {
    .pop-element.pop-report & {
        justify-content: flex-end !important;
        height: calc(100vh - 140px);
    }

    //Progress bar
    .mat-progress-bar-buffer {
        background: #66cf92;
    }
    
    .mat-progress-bar-fill {
        &:after {
            background: $green-dark;
        }
    }

    .mat-progress-bar {
        top: -8px;
    }
}

.icon-btn-close {
    position: absolute;
    top: 30px;
    right: 30px;
    color: $blue-2;
    z-index: 5;

    .add-project &, .edit-details & {
        top: 5px;
        right: 0;
    }

    > span {
        display: none;
    }

    &.mat-button {
        position: absolute;
        min-width: 1px;
        line-height: 1;
    }
}

.add-project, .edit-details {
    position: relative;
    background:#fff;
}