@use "theme_variables_common" as *;


.popover-overlay {
    border: none;
    border-radius: 2px;
    box-shadow: var(--popover-shadow-color);

    &.validation-popover {
        nx-popover {
            background : var(--validation-popover-bg);

            .arrow::after {
                border-right-color : var(--validation-popover-bg);
            }
        }
        .mat-like-validation-wrapper {
            .marker-error {
                width        : 12px;
                display      : inline-block;
                padding-left : 2px;
            }

            .marker-success {
                width        : 12px;
                display      : inline-block;
            }

            & .validation-msg {
                .marker-success {
                    display: none;
                }

                &.validation-success {
                    color : var(--success-label);

                    .marker-error {
                        display: none;
                    }

                    .marker-success {
                        display: inline-block;
                    }
                }

                &.validation-error {
                    color : var(--error-label);

                    .marker-success {
                        display: none;
                    }
                }
            }
        }
    }

    &.system-popover {
        width: 250px;
        z-index: 4;

        .system-name {
            font-family: var(--font-family-medium);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .reminder {
            font-family: var(--font-family-medium);
            color: var(--light16);
            margin-left: 28px;
        }
    }

    &.rounded-popover {
        border-radius: 8px !important;
        overflow: hidden;
    }
}
