%modal-dialog.warning header { background-color: rgb(var(--tone-yellow-050)); border-color: rgb(var(--tone-yellow-500)); color: rgb(var(--tone-yellow-800)); } %modal-dialog.warning header > *:not(label) { font-size: var(--typo-size-500); font-weight: var(--typo-weight-semibold); } %modal-dialog.warning header::before { @extend %with-alert-triangle-mask, %as-pseudo; color: rgb(var(--tone-yellow-500)); float: left; margin-top: 2px; margin-right: 3px; } %modal-dialog-overlay { background-color: rgb(var(--tone-gray-000) / 90%); } %modal-window { box-shadow: var(--decor-elevation-800); } %modal-window { /*%frame-gray-000*/ background-color: rgb(var(--tone-gray-000)); } %modal-window > footer, %modal-window > header { @extend %frame-gray-800; } %modal-window > header > *:not(button) { @extend %h200; } .modal-dialog-body, %modal-window > footer, %modal-window > header { border-color: rgb(var(--tone-gray-300)); } .modal-dialog-body { border-style: solid; border-left-width: 1px; border-right-width: 1px; } %modal-window > footer, %modal-window > header { border-width: 1px; }