@amsterdam/design-system-css/dist/dialog/dialog.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

.ams-dialog:not(dialog:not([open])){inset-block:0;padding-block:0;padding-inline:0;background-color:var(--ams-dialog-background-color);border-color:var(--ams-dialog-border-color);border-radius:var(--ams-dialog-border-radius);border-style:var(--ams-dialog-border-style);border-width:var(--ams-dialog-border-width);box-shadow:var(--ams-dialog-box-shadow);box-sizing:border-box;container-name:var(--ams-dialog-container-name);container-type:var(--ams-dialog-container-type);display:flex;flex-direction:column;gap:var(--ams-dialog-gap);inline-size:var(--ams-dialog-inline-size);max-block-size:var(--ams-dialog-max-block-size);max-inline-size:var(--ams-dialog-max-inline-size)}@media(forced-colors: active){.ams-dialog:not(dialog:not([open])){background-color:Canvas;border-color:currentColor;border-style:solid;border-width:max(1px,var(--ams-dialog-border-width))}}@media(min-width: 37.5rem){.ams-dialog:not(dialog:not([open])){inline-size:var(--ams-dialog-medium-inline-size, var(--ams-dialog-vi-medium-inline-size));max-block-size:var(--ams-dialog-medium-max-block-size, var(--ams-dialog-vi-medium-max-block-size))}}.ams-dialog:not(dialog:not([open]))::backdrop{background-color:var(--ams-dialog-backdrop-background-color, rgba(24, 24, 24, 0.625))}@supports selector(:has(*)){.ams-body:has(.ams-dialog:modal){overflow:hidden}}.ams-dialog__header{align-items:flex-start;display:flex;gap:var(--ams-dialog-header-gap);justify-content:space-between;padding-block:var(--ams-dialog-header-padding-block);padding-inline:var(--ams-dialog-header-padding-inline)}@media(forced-colors: active){.ams-dialog__header{border-block-end-color:currentColor;border-block-end-style:solid;border-block-end-width:1px}}@media(min-width: 37.5rem){.ams-dialog__header{padding-block:var(--ams-dialog-header-medium-padding-block, var(--ams-dialog-header-vi-medium-padding-block));padding-inline:var(--ams-dialog-header-medium-padding-inline, var(--ams-dialog-header-vi-medium-padding-inline))}}.ams-dialog__body{overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;padding-block:var(--ams-dialog-body-padding-block);padding-inline:var(--ams-dialog-body-padding-inline)}@media(min-width: 37.5rem){.ams-dialog__body{padding-inline:var(--ams-dialog-body-medium-padding-inline, var(--ams-dialog-body-vi-medium-padding-inline))}}.ams-dialog__footer{padding-block:var(--ams-dialog-footer-padding-block);padding-inline:var(--ams-dialog-footer-padding-inline)}@media(forced-colors: active){.ams-dialog__footer{border-block-start-color:currentColor;border-block-start-style:solid;border-block-start-width:1px}}@media(min-width: 37.5rem){.ams-dialog__footer{padding-block:var(--ams-dialog-footer-medium-padding-block, var(--ams-dialog-footer-vi-medium-padding-block));padding-inline:var(--ams-dialog-footer-medium-padding-inline, var(--ams-dialog-footer-vi-medium-padding-inline))}}/*# sourceMappingURL=dialog.css.map */