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

@use "../../common/breakpoint" as *;
@use "../../common/resets" as *;

/* 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])) {
  @include reset-dialog;

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

  @media (min-width: $ams-breakpoint-medium) {
    inline-size: var(--ams-dialog-medium-inline-size);
    max-block-size: var(--ams-dialog-medium-max-block-size);
  }

  /*
   * 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);

  @media (min-width: $ams-breakpoint-medium) {
    padding-block: var(--ams-dialog-header-medium-padding-block);
    padding-inline: var(--ams-dialog-header-medium-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);

  @media (min-width: $ams-breakpoint-medium) {
    padding-inline: var(--ams-dialog-body-medium-padding-inline);
  }
}

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

  @media (min-width: $ams-breakpoint-medium) {
    padding-block: var(--ams-dialog-footer-medium-padding-block);
    padding-inline: var(--ams-dialog-footer-medium-padding-inline);
  }
}