@use "../theme_variables_common" as common;
@use "./bootstrap_utils" as bootstrap;
@use "./mixins";

.standalone-delimiter {
    height: 1px;
    background-color: var(--border-color);
    padding: 0 12px;
    position: relative;

    &:after {
        height: 1px;
        background-color: var(--horizontal-sep-color);
        content: "";
        position: absolute;
        width: calc(100% - 24px);
    }
}

.block-container {
    max-width: common.$fluid-container-max-width;
    width: 100%;
    padding: 0 16px;
}


.loading .auth-visible,
.loading .auth-hidden {
    display: none !important;
}

.authorized .auth-hidden,
.authorized .loading-visible {
    display: none !important;
}

.anonymous .auth-visible,
.anonymous .loading-visible {
    display: none !important;
}

@include bootstrap.media-breakpoint-up(sm) {
    .hoverable .hover-visible {
        visibility: hidden;
    }

    .hoverable:hover .hover-visible {
        visibility: visible;
    }
}

h1 .badge {
    margin-left: 8px;
}

.inactive {
    opacity: 0.7;
    cursor: pointer;
}

.disabled {
    color: var(--elements-disabled) !important;
    cursor: default !important;
}

.min-w-80 {
    min-width: 80px;
}

.min-w-100 {
    min-width: 100px;
}

.min-w-120 {
    min-width: 120px;
}

// Override default color
.cdk-overlay-dark-backdrop {
    background-color: var(--dialog-overlay-bg) !important;
}

.cdk-overlay-dark-backdrop + div.cdk-global-overlay-wrapper:has(.full-backdrop) {
    background-color: var(--body-bg) !important;
}

.cdk-overlay-pane.nx-legacy-dialog-style {
    .cdk-dialog-container {
        // <p> has bottom margin which can create a gap between the body and footer
        background-color: var(--dialog-bg);
        box-shadow: var(--dialog-box-shadow);
    }

    // Add "panelClass: 'no-container-shadow'" in the Dialog's config to apply this class
    &.no-container-shadow .cdk-dialog-container {
        box-shadow: none;
    }

    &.no-container-background .cdk-dialog-container {
        box-shadow: none;
        background: none;
    }
}

.cdk-virtual-scroll-content-wrapper {
    width: 100%;
}

.nx-breadcrumbs {
    @include mixins.ellipsis;
    text-wrap: nowrap;

    .group-path {
        color: var(--reports-group-path);
    }
}
