/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@mixin reset-dialog {
  inset-block: 0;
  padding-block: 0;
  padding-inline: 0;
}

/* A dialog must have `display: none` until the `open` attribute is set,
so do not apply these styles without an `open` attribute. */
.ams-dialog:not(dialog:not([open])) {
  background-color: var(--ams-dialog-background-color);
  border: var(--ams-dialog-border);
  box-sizing: border-box;
  display: flex; // We’d like to use CSS Grid here, but that doesn’t work as expected in Safari.
  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);

  @include reset-dialog;

  /*
   * The fallback value is for browsers where ::backdrop does not inherit from its originating element.
   * @see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element
   */
  &::backdrop {
    background: var(--ams-dialog-backdrop-background-color, rgb(24 24 24 / 62.5%));
  }
}

.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);
}

.ams-dialog__body {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-block: var(--ams-dialog-body-padding-block);
  padding-inline: var(--ams-dialog-body-padding-inline);
}

.ams-dialog__footer {
  padding-block: var(--ams-dialog-footer-padding-block);
  padding-inline: var(--ams-dialog-footer-padding-inline);
}