/**
 * @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;
  container-name: var(--ams-dialog-container-name);
  container-type: var(--ams-dialog-container-type);
  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);

  // Ensure there always is a border in forced colors mode.
  @media (forced-colors: active) {
    background-color: Canvas;
    border-color: currentColor;
    border-style: solid;

    // Keep at least 1px so a token set to 0 can’t hide the border.
    border-width: max(1px, var(--ams-dialog-border-width));
  }

  @media (min-width: $ams-breakpoint-medium) {
    inline-size: var(--ams-dialog-medium-inline-size /* @deprecated */, var(--ams-dialog-vi-medium-inline-size));
    max-block-size: var(
      --ams-dialog-medium-max-block-size /* @deprecated */,
      var(--ams-dialog-vi-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-color: var(--ams-dialog-backdrop-background-color, rgb(24 24 24 / 62.5%));
  }
}

/*
 * showModal() makes content inert but doesn’t lock scrolling: gestures over
 * the ::backdrop still scroll the page. overflow: hidden on the body (not
 * html) suppresses this because body overflow propagates to the viewport.
 * Wrapped in @supports as a progressive enhancement; iOS Safari still needs
 * JS for a hard guarantee on touch.
 */
@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);

  /* Use a border in forced colors mode for visual hierarchy and demarkating the scrollable body */
  @media (forced-colors: active) {
    border-block-end-color: currentColor;
    border-block-end-style: solid;
    border-block-end-width: 1px;
  }

  @media (min-width: $ams-breakpoint-medium) {
    padding-block: var(
      --ams-dialog-header-medium-padding-block /* @deprecated */,
      var(--ams-dialog-header-vi-medium-padding-block)
    );
    padding-inline: var(
      --ams-dialog-header-medium-padding-inline /* @deprecated */,
      var(--ams-dialog-header-vi-medium-padding-inline)
    );
  }
}

.ams-dialog__body {
  overflow-x: hidden;
  overflow-y: auto;
  /* stylelint-disable-next-line plugin/use-baseline -- Progressive enhancement. */
  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 /* @deprecated */,
      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);

  /* Use a border in forced colors mode for visual hierarchy and demarkating the scrollable body */
  @media (forced-colors: active) {
    border-block-start-color: currentColor;
    border-block-start-style: solid;
    border-block-start-width: 1px;
  }

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