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

/**
 * Modal base — paint surface for the theme layer.
 *
 * The modal renders as five surfaces: the dialog root (`.slds-modal`), the
 * fixed-position container that holds the dialog (`.slds-modal__container`,
 * structural — no theme hooks), the header (`.slds-modal__header`), the
 * scrolling content (`.slds-modal__content`), the footer (`.slds-modal__footer`),
 * and a sibling backdrop (`.slds-backdrop`). The header / content / footer trio
 * shares a common `--slds-c-modal-color-background` default so customers can
 * retheme the whole stack with one write; each surface also exposes its own
 * background / text-color hook for finer-grained overrides.
 *
 * Sizing modifiers (`_small`, `_medium`, `_large`, `_full`) and the
 * fade / slide animation classes are layout / motion primitives and stay
 * unhookified — they describe structural breakpoints, not theme-tunable paint.
 */

/* ─────────────── Dialog root ─────────────── */

.slds-modal {
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.1s linear,
    opacity 0.1s linear;
  position: fixed;
  inset: 0;
  z-index: 9001;
}

/* ─────────────── Container (structural; no theme paint) ─────────────── */

.slds-modal__container {
  position: relative;
  transform: translate(0, 0);
  transition:
    transform 0.1s linear,
    opacity 0.1s linear;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--slds-c-modal-sizing-height, 100%);
  max-height: var(--slds-c-modal-sizing-height-max);
  min-height: var(--slds-c-modal-sizing-height-min);
  margin-block: 0;
}

@media (min-width: 48em) {
  .slds-modal__container {
    margin-block: 0;
    margin-inline: auto;
    width: var(--slds-c-modal-sizing-width, 50%);
    max-width: var(--slds-c-modal-sizing-width-max, 40rem);
    min-width: var(--slds-c-modal-sizing-width-min, 20rem);
  }
}

/* ─────────────── Title ─────────────── */

.slds-modal__title {
  font-weight: var(--slds-c-modal-header-font-weight);
  font-size: var(--slds-c-modal-header-font-size);
  line-height: var(--slds-c-modal-header-font-line-height);
}

/* ─────────────── Header ─────────────── */

.slds-modal__header {
  position: relative;
  border-start-end-radius: var(--slds-c-modal-radius-border);
  border-start-start-radius: var(--slds-c-modal-radius-border);
  border-block-start-width: var(--slds-c-modal-sizing-border, 0);
  border-block-start-style: solid;
  border-block-start-color: var(--slds-c-modal-color-border, transparent);
  border-inline-width: var(--slds-c-modal-sizing-border, 0);
  border-inline-style: solid;
  border-inline-color: var(--slds-c-modal-color-border, transparent);
  background-color: var(--slds-c-modal-header-color-background, var(--slds-c-modal-color-background));
  color: var(--slds-c-modal-header-color-foreground);
  flex-shrink: 0;
  padding-block-start: var(
    --slds-c-modal-header-spacing-block-start,
    var(--slds-c-modal-header-spacing-block)
  );
  padding-inline-end: var(
    --slds-c-modal-header-spacing-inline-end,
    var(--slds-c-modal-header-spacing-inline)
  );
  padding-block-end: var(--slds-c-modal-header-spacing-block-end, var(--slds-c-modal-header-spacing-block));
  padding-inline-start: var(
    --slds-c-modal-header-spacing-inline-start,
    var(--slds-c-modal-header-spacing-inline)
  );
  text-align: var(--slds-c-modal-header-font-align);

  &::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: var(--slds-c-modal-header-sizing-border, var(--slds-c-modal-sizing-border, 0));
    background-color: var(--slds-c-modal-header-color-border, var(--slds-c-modal-color-border, transparent));
    pointer-events: none;
  }
}

.slds-modal__header + .slds-modal__menu {
  border-start-end-radius: 0;
  border-start-start-radius: 0;
}

/* Close button positions absolutely within the header. The negative
   block-start offset lifts the button above the header surface so it
   straddles the modal's top edge. */
.slds-modal__header .slds-modal__close {
  position: absolute;
  margin-inline-start: 0;
  inset-block-end: 0;
}

.slds-modal .slds-modal__close {
  --slds-c-button-color-background: var(--slds-c-modal-close-color-background, revert-layer);
  --slds-c-button-color-border: var(--slds-c-modal-close-color-border, revert-layer);
  --slds-c-button-sizing-border: var(--slds-c-modal-close-sizing-border, revert-layer);
  --slds-c-button-color-background-hover: var(--slds-c-modal-close-color-background-hover, revert-layer);
  --slds-c-button-color-background-active: var(--slds-c-modal-close-color-background-hover, revert-layer);
  --slds-c-button-color-background-focus: var(--slds-c-modal-close-color-background-hover, revert-layer);

  width: var(--slds-c-modal-close-size);
  height: var(--slds-c-modal-close-size);
  margin-inline-start: auto;
  position: relative;

  &:focus-visible {
    box-shadow: var(--slds-c-modal-close-shadow-focus, revert-layer);
    outline: var(--slds-c-modal-close-sizing-outline, revert-layer) solid
      var(--slds-c-modal-close-color-background, revert-layer);
    border-width: 0;
  }
}

/* Headless content: header is hidden, content takes the top corners. */
.slds-modal__content_headless,
.slds-modal__header_empty + .slds-modal__content {
  border-start-end-radius: var(--slds-c-modal-radius-border);
  border-start-start-radius: var(--slds-c-modal-radius-border);
}

/* ─────────────── Content ─────────────── */

.slds-modal__content {
  background-color: var(--slds-c-modal-content-color-background, var(--slds-c-modal-color-background));
  color: var(--slds-c-modal-content-color-foreground);
  border-inline-width: var(--slds-c-modal-sizing-border, 0);
  border-inline-style: solid;
  border-inline-color: var(--slds-c-modal-color-border, transparent);
  overflow: hidden;
  overflow-y: auto;
  padding-block-start: var(
    --slds-c-modal-content-spacing-block-start,
    var(--slds-c-modal-content-spacing-block)
  );
  padding-block-end: var(--slds-c-modal-content-spacing-block-end, var(--slds-c-modal-content-spacing-block));
  padding-inline-start: var(
    --slds-c-modal-content-spacing-inline-start,
    var(--slds-c-modal-content-spacing-inline)
  );
  padding-inline-end: var(
    --slds-c-modal-content-spacing-inline-end,
    var(--slds-c-modal-content-spacing-inline)
  );
}

/* Footless content: takes the bottom corners and the terminal shadow. */
.slds-modal__content_footless,
.slds-modal__container > .slds-modal__content:last-child,
.slds-modal__content_has-hidden-footer {
  border-end-end-radius: var(--slds-c-modal-radius-border);
  border-end-start-radius: var(--slds-c-modal-radius-border);
  box-shadow: var(--slds-c-modal-shadow);
}

/* ─────────────── Footer ─────────────── */

.slds-modal__footer {
  position: relative;
  border-end-end-radius: var(--slds-c-modal-radius-border);
  border-end-start-radius: var(--slds-c-modal-radius-border);
  border-inline-width: var(--slds-c-modal-sizing-border, 0);
  border-inline-style: solid;
  border-inline-color: var(--slds-c-modal-color-border, transparent);
  border-block-end-width: var(--slds-c-modal-sizing-border, 0);
  border-block-end-style: solid;
  border-block-end-color: var(--slds-c-modal-color-border, transparent);
  background-color: var(--slds-c-modal-footer-color-background, var(--slds-c-modal-color-background));
  color: var(--slds-c-modal-footer-color-foreground);
  flex-shrink: 0;
  padding-block-start: var(
    --slds-c-modal-footer-spacing-block-start,
    var(--slds-c-modal-footer-spacing-block)
  );
  padding-inline-end: var(
    --slds-c-modal-footer-spacing-inline-end,
    var(--slds-c-modal-footer-spacing-inline)
  );
  padding-block-end: var(--slds-c-modal-footer-spacing-block-end, var(--slds-c-modal-footer-spacing-block));
  padding-inline-start: var(
    --slds-c-modal-footer-spacing-inline-start,
    var(--slds-c-modal-footer-spacing-inline)
  );
  text-align: var(--slds-c-modal-footer-font-align);
  box-shadow: var(--slds-c-modal-shadow);

  &::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: var(--slds-c-modal-footer-sizing-border, var(--slds-c-modal-sizing-border, 0));
    background-color: var(--slds-c-modal-footer-color-border, var(--slds-c-modal-color-border, transparent));
    pointer-events: none;
  }
}

.slds-modal__footer .slds-button + .slds-button {
  margin-inline-start: var(--slds-c-modal-footer-button-spacing-gap);
}

/* Spreads buttons to both ends of the footer. */
.slds-modal__footer_directional .slds-button:first-child {
  float: inline-start;
}

/* ─────────────── Sizing modifiers (structural) ─────────────── */

@media (min-width: 48em) {
  .slds-modal_small .slds-modal__container {
    width: 60%;
    max-width: 52.0625rem;
    min-width: 40rem;
  }

  .slds-modal_medium .slds-modal__container {
    width: 70%;
    max-width: 75rem;
    min-width: 40rem;
  }

  .slds-modal_large .slds-modal__container,
  .slds-modal_full .slds-modal__container {
    width: 90%;
    max-width: none;
    min-width: 40rem;
  }
}

@media (max-width: 30em) {
  .slds-modal_full {
    inset-block-start: env(safe-area-inset-top, 0);
    inset-block-end: auto;
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .slds-modal_full .slds-modal__header {
    grid-area: header;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  .slds-modal_full .slds-modal__container {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    background-color: var(--slds-c-modal-header-color-background, var(--slds-c-modal-color-background));
    display: grid;
    height: 100dvh;
    grid-template-rows: min-content min-content 1fr min-content;
    grid-template-areas: 'close' 'header' 'content' 'footer';
    grid-template-columns: 1fr;
  }

  .slds-modal_full .slds-modal__content_footless,
  .slds-modal_full .slds-modal__container > .slds-modal__content:last-child,
  .slds-modal_full .slds-modal__content_has-hidden-footer {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    box-shadow: none;
  }

  .slds-modal_full .slds-modal__close {
    grid-area: close;
  }

  .slds-modal_full .slds-modal__content {
    grid-area: content;
  }

  .slds-modal_full .slds-modal__footer {
    grid-area: footer;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    box-shadow: none;
  }
}

/**
 * SLDS Blueprint <> LBC Parity Patch — `display: contents` on the LBC's
 * synthetic shadow hosts so the grid-template layout in `_full` reaches
 * the leaf elements. Internal use only.
 */
.slds-modal_full lightning-button-icon + div,
.slds-modal_full lightning-modal,
.slds-modal_full lightning-modal-header,
.slds-modal_full lightning-modal-body,
.slds-modal_full lightning-modal-footer {
  display: contents;
}

/* ─────────────── Backdrop ─────────────── */

.slds-backdrop {
  transition-duration: 0.4s;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  inset: 0;
  background: var(--slds-c-backdrop-color-background);
  z-index: 9000;
  backdrop-filter: blur(5px);
}

.slds-backdrop_open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s linear;
}

/* ─────────────── Open / animation states (structural) ─────────────── */

.slds-fade-in-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.1s linear;
}

.slds-fade-in-open .slds-modal__container-reset {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

.slds-slide-up-open {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition:
    opacity 0.1s linear,
    transform 0.2s linear;
}

.slds-slide-up-open .slds-modal__container-reset {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 1rem);
  transition:
    opacity 0.2s linear,
    transform 0.2s linear;
}

.slds-slide-up-saving {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -1rem);
}

.slds-slide-down-cancel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 1rem);
}