/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

@layer theme {
  /* All modal hooks anchor on .slds-modal so custom properties inherit
     into the header / content / footer / close-button / backdrop trees. */
  .slds-modal {
    /* Shared chrome */
    --slds-c-modal-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-modal-radius-border: var(--slds-g-radius-border-4);
    --slds-c-modal-shadow: var(--slds-g-shadow-4);

    /* Dividers */
    --slds-c-modal-header-sizing-border: var(--slds-g-sizing-border-2);
    --slds-c-modal-header-color-border: var(--slds-g-color-border-1);
    --slds-c-modal-footer-sizing-border: var(--slds-g-sizing-border-2);
    --slds-c-modal-footer-color-border: var(--slds-g-color-border-1);

    /* Header typography */
    --slds-c-modal-header-font-weight: var(--slds-g-font-weight-4);
    --slds-c-modal-header-font-size: var(--slds-g-font-scale-3);
    --slds-c-modal-header-font-line-height: var(--slds-g-font-line-height-2);
    --slds-c-modal-header-font-align: center;

    /* Header surface */
    --slds-c-modal-header-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-modal-header-color-foreground: var(--slds-g-color-on-surface-3);
    --slds-c-modal-header-spacing-block: var(--slds-g-spacing-4);
    --slds-c-modal-header-spacing-inline: var(--slds-g-spacing-4);

    /* Content surface */
    --slds-c-modal-content-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-modal-content-color-foreground: var(--slds-g-color-on-surface-1);

    /* Footer surface */
    --slds-c-modal-footer-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-modal-footer-color-foreground: var(--slds-g-color-on-surface-3);
    --slds-c-modal-footer-spacing-block: var(--slds-g-spacing-3);
    --slds-c-modal-footer-spacing-inline: var(--slds-g-spacing-4);
    --slds-c-modal-footer-button-spacing-gap: var(--slds-g-spacing-2);
    --slds-c-modal-footer-font-align: right;

    /* Close button */
    --slds-c-modal-close-size: var(--slds-g-sizing-9);
    --slds-c-modal-close-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-modal-close-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-modal-close-color-border: var(--slds-g-color-border-2);
    --slds-c-modal-close-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-modal-close-sizing-outline: var(--slds-g-sizing-border-2);
    --slds-c-modal-close-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);
  }

  .slds-modal .slds-modal__header .slds-modal__close {
    inset-block-start: calc(var(--slds-g-spacing-6) * -1.25);
    inset-inline-end: 0;
  }

  .slds-modal .slds-modal__close {
    inset-block-end: var(--slds-g-spacing-2);
  }

  .slds-modal.slds-modal_full .slds-modal__header .slds-modal__close {
    inset-inline-end: var(--slds-g-spacing-4);
  }

  /* Backdrop is its own component namespace (`.slds-backdrop` is
     shared across modal, prompt, agentforce, etc.), and is rendered
     as a sibling of `.slds-modal`, not a descendant. The hook lives
     on the backdrop's own root and routes through the shared backdrop
     token so a theme-wide retheme reaches every consumer. */
  .slds-backdrop {
    --slds-c-backdrop-color-background: var(--slds-s-backdrop-color-background);
  }

  /* Empty-header context: zero the header's spacing + divider so an
     empty header collapses cleanly. Hook writes anchor on the modal
     root (Rule 4 own-root descendant write) — a bare
     `.slds-modal__header_empty` write would inherit into any element
     carrying the BEM class regardless of cascade context. */
  .slds-modal .slds-modal__header_empty {
    --slds-c-modal-header-spacing-block: 0;
    --slds-c-modal-header-spacing-inline: 0;
    --slds-c-modal-header-sizing-border: 0;
  }

  .slds-modal .slds-modal__container {
    padding-block-start: var(--slds-g-spacing-8);
    padding-block-end: var(--slds-g-spacing-12);
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  @media (max-width: 47.9375em) {
    .slds-modal .slds-modal__container {
      margin-inline: var(--slds-g-spacing-6);
    }
  }

  .slds-modal.slds-modal_full {
    --slds-c-modal-radius-border: 0;
  }

  .slds-modal.slds-modal_full .slds-modal__container {
    padding-block-start: var(--slds-g-spacing-4);
    padding-block-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}