@use '../../styles/bootstrap/mixins/border-radius';
@use '../../styles/bootstrap/mixins/breakpoints';
@use '../../styles/bootstrap/mixins/text-truncate';
@use '../../styles/variables';
@use '../../styles/modules/utils.scss';

.thy-dialog-content-sidebar-header {
    min-height: variables.$dialog-header-height;
    .title {
        font-size: variables.$font-size-md;
    }
}

.thy-dialog-container {
    display: flex;
    flex-direction: column;
    border-radius: variables.$dialog-border-radius;
    box-sizing: border-box;
    overflow: auto;
    outline: 0;

    // The dialog container should completely fill its parent overlay element.
    width: 100%;
    height: 100%;
    // Since the dialog won't stretch to fit the parent, if the height
    // isn't set, we have to inherit the min and max values explicitly.
    min-height: inherit;
    max-height: inherit;
    background: variables.$bg-default;
    box-shadow: variables.$dialog-box-shadow;

    .thy-layout {
        .dialog-title {
            font-size: variables.$rem-14px;
        }
    }
}

.thy-dialog-content {
    @extend .d-flex-column-fill;
    overflow: hidden;
    & > .thy-layout > .thy-layout-sidebar > .sidebar-header {
        padding: variables.$dialog-header-padding;
        @extend .thy-dialog-content-sidebar-header;
    }
}

// Dialog header
// Top section of the modal w/ title and dismiss
.thy-dialog-header,
.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
    padding: variables.$dialog-header-padding;
    min-height: variables.$dialog-header-height;
    height: variables.$dialog-header-height;
    @include border-radius.border-top-radius(variables.$border-radius-lg);

    &.thy-dialog-header-divided {
        border-bottom: variables.$dialog-header-border-width solid variables.$dialog-header-border-color;
    }

    &.thy-dialog-header-lg {
        padding: 0 variables.$dialog-header-padding-lg;
    }

    h3 {
        font-size: variables.$font-size-md;
        font-weight: 400;
    }
}

// Title text within header
.dialog-title {
    margin-bottom: 0;
    line-height: variables.$dialog-header-title-line-height;
}

.dialog-body {
    position: relative;
    overflow: auto;
    flex: 1 1 auto;
    padding: variables.$dialog-body-padding;
    display: block;
    -webkit-overflow-scrolling: touch;

    &.dialog-body-clear-padding {
        padding: 0;
    }
}

// Footer (for actions)
.dialog-footer {
    display: flex;
    border: 0;
    align-items: center; // vertically center
    padding: variables.$dialog-footer-padding;

    &.dialog-footer-border-top {
        border-top: variables.$dialog-footer-border-width solid variables.$dialog-footer-border-color;
    }

    .dialog-footer-description {
        flex: 1;
        @include text-truncate.text-truncate();
    }

    &.dialog-footer-actions-align-left {
        flex-direction: row;
        .dialog-footer-description {
            text-align: right;
            margin-left: 30px;
        }
    }
    &.dialog-footer-actions-align-center {
        justify-content: center;
        .dialog-footer-actions {
            display: flex;
        }
        .dialog-footer-description {
            margin-left: 30px;
            flex: unset;
        }
    }
    &.dialog-footer-actions-align-right {
        flex-direction: row-reverse;
        .dialog-footer-description {
            text-align: left;
            margin-right: 30px;
        }
    }
}

// Measure scrollbar width for padding body during modal show/hide
.dialog-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

// Scale up the modal
@include breakpoints.media-breakpoint-up(sm) {
    // Automatically set dialog's width for larger view ports
    .dialog-md {
        width: variables.$dialog-md;
        // margin: $modal-dialog-margin-y-sm-up auto;
    }

    .dialog-sm {
        width: variables.$dialog-sm;
    }
}

@include breakpoints.media-breakpoint-up(lg) {
    .dialog-lg {
        width: variables.$dialog-lg;
    }
    .dialog-max-lg {
        width: variables.$dialog-max-lg;
    }
}

.dialog-full {
    width: 100vw;
    height: 100vh;
    .thy-dialog-container {
        border-radius: 0px;
    }
}

// expect supper-lg
.dialog-md,
.dialog-sm,
.dialog-lg,
.dialog-max-lg {
    max-height: variables.$dialog-default-max-height;
}

// supper lg
.dialog-supper-lg,
.dialog-super-lg {
    width: variables.$dialog-super-lg-width;
    height: variables.$dialog-super-lg-height;
    max-width: variables.$dialog-super-lg-max-width;
    max-height: variables.$dialog-super-lg-max-height;
}

.thy-confirm-footer {
    display: flex;
    .thy-confirm-cancel {
        margin-right: variables.$btn-dialog-confirm-cancel;
    }
    &.thy-confirm-footer-left {
        flex-direction: row;
    }
    &.thy-confirm-footer-center {
        justify-content: center;
    }
    &.thy-confirm-footer-right {
        flex-direction: row-reverse;
    }
}

// 自定义backdropClass样式
.custom-backdrop-class {
    background-color: rgba(skyblue, 0.3);
}
