.ui-dialog__overlay {
    --ui-dialog-container-max-width: 464px;
    --ui-dialog-container-max-width-large: 664px;
    --ui-dialog-container-max-width-wide-desktop: 1100px;
    --ui-dialog-container-max-height-wide-desktop: 676px;
    --ui-dialog-header-height: 56px;
    --ui-dialog-swiper-container-height: 64px;
    --ui-dialog-swiper-width: 56px;
    --ui-dialog-swiper-height: 6px;

    position: fixed;
    inset: 0;
    z-index: var(--theme-z-index-overlay);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    /* Standard mobile dialogs should have some top/bottom padding */
    padding: var(--space-x2) 0;
    background-color: var(--theme-surface-overlay);
}

.ui-dialog__overlay--large {
    /* Large mobile dialogs should only have some top padding */
    padding: var(--space-x4) 0 0 0;
}

.ui-dialog__overlay--sheet,
.ui-dialog__overlay--halfsheet,
.ui-dialog__overlay--blade,
.ui-dialog__overlay--fullscreen {
    padding: 0;
}

.ui-dialog__loader {
    position: absolute;
}

.ui-dialog__container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ui-dialog__overlay--sheet .ui-dialog__container {
    align-items: end;
}

@media (min-width: 700px) {
    /* Standard desktop dialogs should have some padding */
    .ui-dialog__overlay {
        padding: var(--space-x8);
    }

    .ui-dialog__overlay--sheet,
    .ui-dialog__overlay--halfsheet,
    .ui-dialog__overlay--blade,
    .ui-dialog__overlay--fullscreen {
        padding: 0;
    }

    .ui-dialog__overlay--sheet .ui-dialog__container {
        bottom: var(--space-x3);
    }

    .ui-dialog__overlay--halfsheet .ui-dialog__container {
        align-items: flex-start;
        border-radius: initial;
    }

    .ui-dialog__overlay--blade .ui-dialog__container {
        justify-content: flex-end;
        border-radius: initial;
    }
}

.ui-dialog__container-inner {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    width: 100%;
    max-width: 90%;
    max-height: calc(100% - var(--ui-dialog-swiper-container-height));
    padding: var(--space-x4);
    overflow: hidden;
    border-radius: var(--theme-border-radius-dialog);
    box-shadow: var(--theme-elevation-20);
}

@media (min-width: 700px) {
    .ui-dialog__container-inner {
        max-width: var(--ui-dialog-container-max-width);
    }
}

@media (max-width: 700px) {
    .ui-dialog__container-inner {
        padding: var(--theme-dialog-padding);
    }
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-dialog__container-inner,
.ui-dialog__container-inner .ui-menu {
    background-color: var(--theme-surface-20);
}

.ui-dialog__overlay--large .ui-dialog__container-inner {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

@media (min-width: 700px) {
    .ui-dialog__overlay--large .ui-dialog__container-inner {
        max-width: var(--ui-dialog-container-max-width-large);
        height: auto;
        max-height: 80vh;
        border-radius: var(--theme-border-radius-dialog);
    }
}

.ui-dialog__overlay--sheet .ui-dialog__container-inner {
    max-width: 100%;
    height: auto;
    max-height: calc(100% - var(--ui-dialog-swiper-container-height));
    padding-bottom: var(--space-x3);
    overflow: visible;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

@media (min-width: 700px) {
    .ui-dialog__overlay--sheet .ui-dialog__container-inner {
        max-width: var(--ui-dialog-container-max-width-large);
        border-radius: var(--theme-border-radius-dialog);
    }
}

@media (min-width: 992px) {
    .ui-dialog__overlay--wide-desktop .ui-dialog__container-inner {
        max-width: var(--ui-dialog-container-max-width-wide-desktop);
        max-height: var(--ui-dialog-container-max-height-wide-desktop);
        border-radius: var(--theme-border-radius-dialog)
    }
}

.ui-dialog__overlay--fullscreen .ui-dialog__container-inner {
    display: block;
    padding: 0;
}

.ui-dialog__overlay--fullscreen .ui-dialog__container-inner,
.ui-dialog__overlay--halfsheet .ui-dialog__container-inner,
.ui-dialog__overlay--blade .ui-dialog__container-inner {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    border-radius: initial;
    box-shadow: none;
}

.ui-dialog__overlay--halfsheet .ui-dialog__container-inner,
.ui-dialog__overlay--blade .ui-dialog__container-inner {
    grid-template-rows: 1fr;
}

.ui-dialog__overlay--blade .ui-dialog__container-inner {
    padding: var(--space-x2);
}

@media (min-width: 700px) {
    .ui-dialog__overlay--halfsheet .ui-dialog__container-inner {
        height: auto;
    }

    .ui-dialog__overlay--blade .ui-dialog__container-inner {
        width: 400px;
    }
}

.ui-dialog__overlay--scrollable .ui-dialog__container-inner {
    padding-right: var(--space-x2);
}

.ui-dialog__overlay--flush .ui-dialog__container-inner {
    padding: 0;
}

.ui-dialog__container--full-height,
.ui-dialog__overlay--sheet .ui-dialog__container--full-height {
    height: 100vh;
}

.ui-dialog__container-inner:not(.ui-dialog__container--header-visible, .ui-dialog__container--footer-visible) {
    grid-template-rows: minmax(0, 1fr);
}

.ui-dialog__content-wrapper {
    transition: all 0.3s;
}

.ui-dialog__swiper {
    position: absolute;
    top: calc((var(--ui-dialog-swiper-height) + var(--space)) * -1);
    left: 0;
    display: block;
    width: 100%;
    height: calc(var(--ui-dialog-swiper-height) + var(--space));
}

.ui-dialog__swiper::before {
    position: relative;
    left: calc(50% - var(--ui-dialog-swiper-width) / 2);
    display: block;
    width: var(--ui-dialog-swiper-width);
    height: var(--ui-dialog-swiper-height);
    content: '';
    background-color: var(--theme-fill-inverse);
    border-radius: 6px;
    opacity: 0.4;
}

.ui-dialog__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-x2);
}

.ui-dialog-header__divider {
    /* Override width to the full width of the dialog */
    width: calc(100% + calc(var(--theme-dialog-padding) * 2));
    margin-top: 0;
    margin-bottom: 0;
    margin-left: calc(var(--theme-dialog-padding) * -1);
    border-top: 1px solid var(--theme-divider-20);
}

.ui-dialog__footer {
    display: flex;
    gap: var(--space-x4);
    padding-top: var(--space-x3);
    border-top: 1px solid var(--theme-divider-20);
}

@media (min-width: 992px) {
    .ui-dialog__footer {
        max-width: var(--dialog-footer-desktop-max-width, 100%);
    }
}

.ui-dialog__overlay--scrollable .ui-dialog__header,
.ui-dialog__overlay--scrollable .ui-dialog__footer {
    margin-right: var(--space-x2);
}

.ui-dialog__overlay--flush .ui-dialog__header {
    margin: var(--theme-dialog-padding) var(--theme-dialog-padding) 0 var(--theme-dialog-padding);
}

.ui-dialog__overlay--flush .ui-dialog__footer {
    margin: 0 var(--space-x4) var(--space-x4) var(--space-x4);
}

.ui-dialog__container--header-visible .ui-dialog__header {
    grid-row: span 1;
}

.ui-dialog__header-buttons {
    display: inline-flex;
    gap: var(--space-x2);
}

.ui-dialog__title {
    flex: 1;
    text-align: center;
}

.ui-dialog__header--close-visible .ui-dialog__title {
    position: absolute;
    width: calc(100% - var(--space-x6) * 2);
    margin: 0 var(--space-x6);
}

.ui-dialog__content-wrapper--scrollbar {
    overflow: hidden;
}

.ui-dialog__content-wrapper,
.ui-dialog__content--inner {
    display: flex;
    flex-direction: column;
    grid-row: span 1;
    gap: var(--space-x2);
    max-height: 100vh;
}

.ui-dialog__content {
    height: 100%;
}

.ui-dialog__overlay--multi-pane .ui-dialog__content-wrapper {
    position: relative;
}

.ui-dialog__container--header-visible .ui-dialog__content-wrapper {
    grid-row: span 2;
}

.ui-dialog__overlay--blade .ui-dialog__container--header-visible .ui-dialog__content-wrapper {
    height: calc(100vh - var(--ui-dialog-header-height));
}

.ui-dialog__overlay--scrollable .ui-dialog__content,
.ui-dialog__overlay--multi-pane .ui-dialog__content {
    padding-right: var(--space-x2);
    padding-bottom: var(--space-x2);
}

/* Hide right padding if custom scrollbar is hidden */
.ui-dialog__overlay--scroll-hidden .ui-dialog__content {
    padding-right: 0;
}

.ui-dialog__multi-pane {
    /* Set a min-height so .ui-loader--overlay doesn't get cut off if there is no content while loading */
    min-height: 150px;
    background-color: var(--theme-surface-20);
}

.ui-dialog__multi-pane[hidden] {
    position: absolute;
    top: 0;
}

.ui-dialog__icon {
    padding: var(--space);
    margin-right: auto;
    background-color: var(--theme-fill-40);
    border-radius: var(--theme-border-radius-dialog);
}

.ui-dialog__section {
    display: flex;
    flex-direction: column;
    gap: var(--space);
}

.ui-dialog__container--footer-visible .ui-dialog__footer {
    grid-row: span 2;
}

.ui-dialog__footer > span {
    width: 100%;
}

.ui-dialog__actionbar {
    position: relative;
    width: calc(100% + var(--space-x6));
    margin: 0 var(--space-x2) calc(var(--space-x4) * -1) calc(var(--space-x4) * -1);
}