$arrow-size: 70px;
$max-height: 95vh;
$radius: 20px;

.vitamui-modal .mat-dialog-container {
    border-radius: $radius;
    padding: 0;
    min-width: 800px;
    max-width: fit-content;
    max-height: $max-height;

    .header {
            padding: 20px 60px 0 60px;
        }

        .content {
            padding: 0px 60px 30px 60px;

            // dialog title
            > .text.large:first-of-type {
                margin: 1.5rem 0;
            }

            .actions:last-of-type {
                display: flex;
                margin-top: 35px;
            }

            .actions:last-of-type > button:not(:last-child) {
                margin-right: 20px;
            }
        }

        .error-message {
            color: $red;
            font-size: 14px;
            margin-bottom: 30px;
        }

        .vitamui-table {
            overflow: auto;
            max-height: 43vh;

            &::-webkit-scrollbar {
              display: none;
            }
        }

        // TODO : depereacted, remove at the end of the redesign
        .form-group {
            margin-bottom: 20px;
        }
}

.vitamui-form-dual-panel .mat-dialog-container {
    border-radius: $radius;
    padding: 0;
    max-height: $max-height;

    .vitamui-form-dual-panel-content {
        display: flex;
        align-items: stretch;
        position: relative;

        .vitamui-form-left-panel {
            background: var(--vitamui-grey-200);
            padding: 65px 38px;
            position: relative;

            &:before {
                content: '';
                display: block;
                position: absolute;
                border-color: transparent transparent transparent var(--vitamui-grey-200);
                border-width: ($arrow-size * 0.5) 0 ($arrow-size * 0.5) ($arrow-size * 0.5);
                border-style: solid;
                width: $arrow-size * 0.5;
                height: $arrow-size;
                top: 50%;
                left: 100%;
                margin-top: $arrow-size * -0.5;
                pointer-events: none;
            }

            &:after {
                content: '';
                display: block;
                position: absolute;
                border-color: transparent transparent transparent var(--vitamui-grey-200);
                border-width: ($arrow-size - 2px) * 0.5 0 ($arrow-size - 2px) * 0.5 ($arrow-size - 2px) * 0.5;
                border-style: solid;
                width: $arrow-size * 0.5 - 2px;
                height: $arrow-size - 2px;
                top: 50%;
                left: 100%;
                margin-top: ($arrow-size - 2px) * -0.5;
                pointer-events: none;
            }

            &-title {
                margin-bottom: 30px;
                font-weight: bold;
                font-size: 20px;
                color: var(--vitamui-grey-900);
            }

            &-property {
                margin-bottom: 10px;

                &-label {
                    font-size: 12px;
                    color: var(--vitamui-grey-600);
                }

                &-content {
                    font-size: 16px;
                    font-weight: bold;
                    color: var(--vitamui-grey-900);
                    word-break: break-word;
                }
            }

            .scroll-container {
                max-height: 400px;
                overflow: auto;
                padding-right: 20px;
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

        .vitamui-form-right-panel {
            padding: 50px 70px;

            &-title {
                margin-bottom: 30px;
                font-weight: bold;
                font-size: 20px;
                color: var(--vitamui-grey-900);
            }

            &-actions {
                margin-top: 20px;
                display: flex;
                align-items: center;
                > :not(:last-child) {
                    margin-right: 20px;
                }
            }

            .scroll-container {
                max-height: 400px;
                overflow: auto;
                padding-right: 20px;
            }
        }

        .btn-close {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 30px;
            right: 30px;

            > i {
                color: var(--vitamui-grey-600);
                opacity: 0.5;
                font-size: 35px;
            }
        }
    }
}