(.active).bottom::after { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); } .clipping.top::after { top: 0; box-shadow: inset 0px 15px 11px -10px var(--maui-modal-shadow-color); } .clipping.bottom::after { bottom: 0; box-shadow: inset 0px -15px 11px -10px var(--maui-modal-shadow-color); } .scroll-outside .panel { max-height: none; } .scroll-outside .body { overflow: initial; } .panel:focus { outline: none; } .is-open .panel { display: flex; opacity: 1; } .header-structure { display: flex; flex: 0 0 auto; justify-content: space-between; column-gap: var(--maui-spacing-4); } .custom-header:not(.has-actions) .header-structure { display: block; } .custom-header .header-actions { display: flex; justify-content: flex-end; flex-grow: 1; } .header-actions { padding-left: var(--maui-spacing-4); gap: var(--maui-spacing-2); } .has-header-spacing .header-actions { padding-top: var(--maui-spacing-4); padding-right: var(--maui-spacing-4); } .header-actions ::slotted(maui-icon-link), .header-actions maui-icon-link { display: block; } .header { display: flex; justify-content: space-between; } .has-header-spacing slot[name='header'] { display: block; padding-top: var(--maui-spacing-4); padding-left: var(--maui-spacing-4); padding-bottom: var(--maui-spacing-4); } .body { display: block; overflow: auto; -webkit-overflow-scrolling: touch; } .has-content-spacing .body { padding-inline: var(--maui-spacing-4); } .has-content-spacing:not(.has-footer) .body { padding-bottom: var(--maui-spacing-4); } .has-content-spacing.no-header:not(.has-actions) .body { padding-top: var(--maui-spacing-4); } .has-footer-spacing.has-footer .footer { display: block; padding-top: var(--maui-spacing-4); padding-inline: var(--maui-spacing-4); padding-bottom: var(--maui-spacing-4); } .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } @media screen and (max-width: