<style include="settings-shared">
@media (min-width: 640px){
:host {
--cr-dialog-width: 512px;
}
}
@media (max-width: 640px){
:host {
--cr-dialog-width: 320px;
}
}
[slot=title] {
--cr-dialog-title-slot-padding-bottom: 8px;
--cr-dialog-title-slot-padding-end: 32px;
--cr-dialog-title-slot-padding-start: 32px;
--cr-dialog-title-slot-padding-top: 32px;
}
#dialog [slot=body] {
--cr-dialog-body-padding-horizontal: 32px;
}
#title {
align-items: center;
background-color: var(--cros-dialog-title-background-color);
display: flex;
font-size: x-small;
height: 32px;
justify-content: center;
}
</style>
<!-- TODO(crbug.com/40134918): Change close logic when CellularSetup embedded -->
<cr-dialog id="dialog">
<div slot="title">
<template is="dom-if"
if="[[shouldShowPsimBanner_(psimBanner_)]]" restamp>
<div id="psim-banner">
[[psimBanner_]]
</div>
</template>
<div id="header">[[getDialogHeader_(dialogHeader_)]]</div>
</div>
<div slot="body">
<cellular-setup
flow-psim-banner="{{psimBanner_}}"
flow-header="{{dialogHeader_}}"
delegate="[[delegate_]]"
current-page-name="[[pageName]]">
</cellular-setup>
</div>
</cr-dialog>