@use '@angular/material' as mat;

.cdk-overlay-container {
    .panel {
        @include mat.dialog-overrides(
            (
                container-shape: 0,
                container-max-width: 100vw,
            )
        );

        margin: 10px;
        box-shadow: var(--mat-sys-level2);
        max-width: calc(100vw - 84px);

        @media (max-width: 960px) {
            max-width: calc(100vw - 20px);
        }

        .mat-dialog-container {
            display: flex;
            flex-direction: column;
            border-radius: 0 !important;
            padding: 0;
            max-width: none;

            & > * {
                display: flex;
                flex: 1;
                flex-direction: column;
            }
        }

        .isPanel {
            display: block !important;
            padding: 4px;

            // Targets lists. Aligns vertically listing headers with details headers
            & > div > div > div.mat-font-headline-sm.no-margin {
                padding-top: 40px;
            }

            // Targets all headers
            // Align header with content (padding 20px)
            &.isFrontPanel > div > div > div.mat-font-headline-sm.no-margin,
            &.isFrontPanel natural-detail-header > div {
                padding-right: 20px;
                padding-left: 20px;
            }

            .panelBody {
                padding: 20px;
            }

            &:not(.isFrontPanel) {
                position: relative;

                cursor: pointer;

                .panelBody {
                    display: none !important;
                }

                &:hover::before {
                    display: block;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background: rgba(0, 0, 0, 0.2);
                    content: '';
                }
            }
        }
    }
}