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

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

/**
  * Modal title (optional)
  */
.slds-modal .slds-modal__title {
  font-weight: var(--slds-c-modal-heading-font-weight, var(--slds-s-container-heading-font-weight));
  font-size: var(
    --slds-c-modal-heading-font-size,
    var(--slds-s-container-heading-font-size, var(--slds-g-font-scale-2))
  );
  line-height: var(--slds-g-font-lineheight-2);
}

/**
  * Centers and sizes the modal horizontally and confines modal within viewport height
  */
.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;
  margin-block: 0;
  margin-inline: var(--slds-g-spacing-6);
  height: 100%;
  padding-block-start: var(--slds-g-spacing-8);
  padding-inline-end: 0;
  padding-block-end: var(--slds-g-spacing-12);
  padding-inline-start: 0;
  border-radius: var(--slds-g-radius-border-2);
}

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

/**
  * Creates the Modal Header container.
  */
.slds-modal__header {
  position: relative;
  border-start-end-radius: var(
    --slds-c-modal-radius-border,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
  border-start-start-radius: var(
    --slds-c-modal-radius-border,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
  border-block-end-width: var(--slds-c-modal-sizing-border, var(--slds-g-sizing-border-2));
  border-block-end-style: solid;
  border-block-end-color: var(--slds-c-modal-color-border, var(--slds-g-color-border-1));
  background-color: var(
    --slds-c-modal-header-color-background,
    var(--slds-c-modal-color-background, var(--slds-g-color-surface-container-1))
  );
  color: var(--slds-c-modal-header-text-color, var(--slds-c-modal-text-color));
  flex-shrink: 0;
  padding-block-start: var(--slds-c-modal-header-spacing-block-start, var(--slds-g-spacing-4));
  padding-inline-end: var(--slds-c-modal-header-spacing-inline-end, var(--slds-g-spacing-4));
  padding-block-end: var(--slds-c-modal-header-spacing-block-end, var(--slds-g-spacing-4));
  padding-inline-start: var(--slds-c-modal-header-spacing-inline-start, var(--slds-g-spacing-4));
  text-align: center;
}

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

/* Deprectaed style rule in SLDS but has to be included here as UI Modals need this  */
.slds-modal__header .slds-modal__close {
  position: absolute;
  inset-block-start: calc(var(--slds-g-spacing-6) * -1.25);
  inset-inline-end: 0;
  margin-inline-start: 0;
  inset-block-end: 0;
}

.slds-modal__close {
  width: var(--slds-g-sizing-9);
  height: var(--slds-g-sizing-9);
  margin-inline-start: auto;
  position: relative;
  inset-block-end: var(--slds-g-spacing-2);
  background-color: var(--slds-g-color-surface-container-1);
  /* Temporary styles until SLDS Modal close icon is updated to use border-filled variant */
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);

  &:hover,
  &:focus-visible,
  &:active {
    background-color: var(--slds-g-color-surface-container-2);
  }

  &:focus-visible {
    box-shadow: var(--slds-g-shadow-insetinverse-focus-1);
    outline: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-container-1);
    border-color: transparent;
  }
}

/* Headless */
.slds-modal__content_headless,
.slds-modal__header_empty + .slds-modal__content {
  border-start-end-radius: var(
    --slds-c-modal-radius-border,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
  border-start-start-radius: var(
    --slds-c-modal-radius-border,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
}

/* Scrollable content area */
.slds-modal__content {
  background-color: var(
    --slds-c-modal-content-color-background,
    var(--slds-c-modal-color-background, var(--slds-g-color-surface-container-1))
  );
  color: var(
    --slds-c-modal-content-text-color,
    var(--slds-c-modal-text-color, var(--slds-s-container-content-color))
  );
  overflow: hidden;
  overflow-y: auto;
}

/* Footless */
.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,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
  border-end-start-radius: var(
    --slds-c-modal-radius-border,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
  box-shadow: var(--slds-g-shadow-4);
}

/* Footer container */
.slds-modal__footer {
  border-end-end-radius: var(
    --slds-c-modal-radius-border,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
  border-end-start-radius: var(
    --slds-c-modal-radius-border,
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
  );
  border-block-start-width: var(--slds-c-modal-sizing-border, var(--slds-g-sizing-border-2));
  border-block-start-style: solid;
  border-block-start-color: var(--slds-c-modal-color-border, var(--slds-g-color-border-1));
  background-color: var(
    --slds-c-modal-footer-color-background,
    var(
      --slds-c-modal-color-background,
      var(--slds-s-container-footer-color-background, var(--slds-g-color-surface-container-2))
    )
  );
  color: var(--slds-c-modal-footer-text-color, var(--slds-c-modal-text-color));
  flex-shrink: 0;
  padding-block-start: var(--slds-c-modal-footer-spacing-block-start, var(--slds-g-spacing-3));
  padding-inline-end: var(--slds-c-modal-footer-spacing-inline-end, var(--slds-g-spacing-4));
  padding-block-end: var(--slds-c-modal-footer-spacing-block-end, var(--slds-g-spacing-3));
  padding-inline-start: var(--slds-c-modal-footer-spacing-inline-start, var(--slds-g-spacing-4));
  text-align: end;
  box-shadow: var(--slds-g-shadow-4);
}

.slds-modal__footer .slds-button + .slds-button {
  margin-inline-start: var(--slds-g-spacing-2);
}

/* Makes buttons inside the footer spread to both left and right. */
.slds-modal__footer_directional .slds-button:first-child {
  float: inline-start;
}

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

@media (min-width: 48em) {
  .slds-modal_medium .slds-modal__container {
    width: 70%;
    max-width: 75rem;
    min-width: 40rem;
  }
}

@media (min-width: 48em) {
  .slds-modal_large .slds-modal__container {
    width: 90%;
    max-width: none;
    min-width: 40rem;
  }
}

@media (min-width: 48em) {
  .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;
    padding-block-start: var(--slds-g-spacing-4);
    padding-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    background-color: var(
      --slds-c-modal-header-color-background,
      var(--slds-c-modal-color-background, var(--slds-g-color-surface-container-1))
    );
    border-radius: 0;
    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;
    inset-inline-end: var(--slds-g-spacing-4);
    color: var(--slds-g-color-on-surface-1);

    --slds-c-button-color-background: var(--slds-g-color-surface-1);
    --slds-c-button-color-background-active: var(--slds-g-color-surface-1);
  }

  .slds-modal_full .slds-modal__close:hover,
  .slds-modal_full .slds-modal__close:focus {
    color: var(--slds-g-color-on-surface-1);
  }

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

/**
   * INTERNAL USE ONLY - SUBJECT TO CHANGE AND REMOVAL
   *
   * SLDS Blueprint <> LBC Parity Patch
   *
   * SLDS blueprints and LBC implementation are not 1:1. This patch is needed to
   * account for the differences introduced in the LBC implementation. Location
   * of this code would ideally live within the LBC component CSS module but
   * synthetic shadow and how LBC deconstructs the modal into individual components
   * makes this not feasible. Not ideal, but this is the best solution for now.
   * Selectors are scoped to lightning-* to avoid any potential outside conflicts.
   */
.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;
}

/**
 * Creates the shaded backdrop used behind the modal.
 */
.slds-backdrop {
  transition-duration: 0.4s;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  background: var(--slds-s-backdrop-color-background);
  z-index: 9000;
  backdrop-filter: blur(5px);
}

/**
  * Allows the backdrop to be visible.
  */
.slds-backdrop_open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s linear;
}

/**
 * Allows the modal to be visible.
 */
.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);
}

/**
  * Deprectaed style rule in SLDS. Used when modal header has no content and
  * only close icon to show in UI Modals
  */
.slds-modal__header_empty {
  --slds-c-modal-header-spacing-block-start: 0;
  --slds-c-modal-header-spacing-block-end: 0;
  --slds-c-modal-header-spacing-inline-start: 0;
  --slds-c-modal-header-spacing-inline-end: 0;
  --slds-c-modal-sizing-border: 0;
}