@use "variables" as *;
@import "mixins";
@import "dotcms-theme/utils/theme-variables";

:host {
    display: none;

    &.active {
        background-color: $color-palette-black-op-80;
        backdrop-filter: blur(5px);
        bottom: 0;
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1000;
    }

    &.no-overflow {
        .dialog {
            .dialog__content {
                overflow: visible;
            }
        }
    }
}

.dialog {
    background-color: $white;
    border-radius: 2px;
    box-shadow: $shadow-xs;
    display: flex;
    flex-direction: column;
    left: 50%;
    max-height: 90vh;
    position: absolute;
    top: 5vh;
    transform: translate(-50%, 0);

    &.paginator ::ng-deep .p-datatable {
        padding-bottom: 3.5rem;
    }
}

.dialog__content {
    flex-basis: 0%;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem $spacing-6 0;

    &::-webkit-scrollbar {
        width: $spacing-1;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: $spacing-1;
        background-color: $color-palette-gray-500;
    }
}

.dialog__footer,
.dialog__header {
    flex-shrink: 0;
    padding: $spacing-4 $spacing-6;
    position: relative;
    transition: box-shadow $basic-speed ease-out;
}

.dialog__footer {
    display: flex;
    justify-content: flex-end;

    button {
        margin-left: $spacing-1;
    }
}

.dialog__footer--shadowed {
    box-shadow: 0px -3px 20px 0 #00000026;
}

.dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog__header--shadowed {
    box-shadow: 0px 3px 20px 0 #00000026;
}

.dialog__title {
    margin: 0;
}
