@use './variables';
@use './mixins/scrollbars' as sb;
@use 'type';

.modal-dialog {
    z-index: variables.$zindex-modal;
    max-width: 100%;

    // Media modal
    &.modal-media {
        .btn-close {
            position: absolute;
            opacity: 0.5;

            transform: translateX(100%);
            right: -8px;
            top: 0;

            @media (max-width: variables.$screen-md) {
                transform: translateY(-100%);
                right: 0;
                top: -8px;
            }
        }
        .modal-content {
            border: 0;

            .modal-body {
                padding: 0;
                line-height: 0;

                .media-content {
                    overflow: hidden;

                    iframe,
                    img,
                    video,
                    object {
                        width: 100%;
                    }
                }
            }
        }
    }

    // Size variations
    &.modal-sm {
        width: variables.$modal-sm;
    }

    &,
    &.modal-md {
        width: variables.$modal-md;
    }

    &.modal-lg {
        width: variables.$modal-lg;
    }

    &.modal-fullscreen {
        margin: 0;
        width: 100%;
        height: 100%;

        .modal-content {
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            @include sb.scrollbars();

            .modal-body {
                flex: 1;
                overflow-y: auto;
            }
        }
    }
}

// Header
.modal-header {
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 1;
    position: relative;

    .modal-title {
        color: variables.$text-color;
        font-size: 16px;
        font-weight: bold;
        flex: 1;
        margin-top: 12px;
        padding: 16px 32px;
        line-height: variables.$modal-title-line-height;
        @extend .text-ellipsis;
    }

    .btn.btn-close {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

// Content
.modal-content {
    background-color: variables.$modal-content-bg;
    border: 1px solid variables.$modal-content-border-color;
    border-radius: 9px;
    box-shadow: 0 0 8px 0 rgba(variables.$level0, 0.4);
    outline: 0;
}

// Body
.modal-body {
    position: relative;
    padding: variables.$modal-inner-padding;
    font-size: 14px;
    color: variables.$text-color;
}

// Footer
.modal-footer {
    padding: 24px;
    text-align: right; // right align buttons
    border-top: 1px solid variables.$modal-footer-border-color;

    .btn + .btn {
        margin-left: 8px;
    }
}

// Backdrop styling
.modal-backdrop {
    background-color: rgba(variables.$modal-backdrop-bg, 0);
    transition:
        background-color 300ms ease-out,
        backdrop-filter 300ms ease-out;

    &.cdk-overlay-backdrop-showing {
        background-color: rgba(variables.$modal-backdrop-bg, variables.$modal-backdrop-opacity);
        backdrop-filter: blur(4px);
    }

    &.transparent {
        background-color: transparent;
        backdrop-filter: none;
    }
}

// Overlay styles
.nw-dialog-overlay-pane {
    .cdk-dialog-container {
        outline: none;
    }
}