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

/**
 * @summary Initializes alert notification
 */
.slds-notify_alert {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Spacing cascade: Direction → Axis (direction-specific falls back to axis-level) */
  padding-block-start: var(--slds-c-alert-spacing-block-start, var(--slds-c-alert-spacing-block));
  padding-inline-end: var(--slds-c-alert-spacing-inline-end, var(--slds-c-alert-spacing-inline));
  padding-block-end: var(--slds-c-alert-spacing-block-end, var(--slds-c-alert-spacing-block));
  padding-inline-start: var(--slds-c-alert-spacing-inline-start, var(--slds-c-alert-spacing-inline));
  border-width: var(--slds-c-alert-sizing-border, 0);
  border-style: solid;
  border-color: var(--slds-c-alert-color-border, transparent);
  border-radius: var(--slds-c-alert-radius-border);
  background-color: var(--slds-c-alert-color-background);
  color: var(--slds-c-alert-color-foreground);
  font-weight: var(--slds-c-alert-font-weight);
  font-size: var(--slds-c-alert-sizing-font);
  text-align: center;

  /* icon Composition */
  .slds-icon {
    --slds-c-icon-color-foreground: var(--slds-c-alert-icon-color-foreground);
  }

  /* Button Icon Composition.
   *
   * `<lightning-button-icon>` renders its <button class="slds-button_icon">
   * inside its shadow root, so `.slds-button_icon` never matches a
   * light-DOM element here. Custom properties DO inherit across the
   * shadow boundary from the host's ancestors, so we scope the hooks
   * to `.slds-notify__close` (the light-DOM parent of the custom
   * element) and let them inherit down.
   *
   * `:hover` on the wrapper fires when the pointer is over the button
   * (the button fills the wrapper). `:focus-within` pierces shadow DOM
   * and catches focus on the inner <button>, which is the closest
   * stand-in for `:focus-visible` observable from outside the shadow
   * tree. */
  .slds-notify__close {
    --slds-c-button-color-foreground: red;
  }

  .slds-notify__close:hover,
  .slds-notify__close:focus-within {
    --slds-c-button-color-foreground-hover: red;
  }
}

.slds-notify_alert a {
  color: currentColor;
  text-decoration: underline;
}

.slds-notify_alert a:hover,
.slds-notify_alert a:focus:not(:focus-visible) {
  text-decoration: none;
  outline: 0;
}

.slds-notify_alert a:focus-visible {
  outline-offset: 2px;
}

.slds-notify_alert a:active {
  color: var(--slds-c-alert-color-foreground-active);
}

/**
  * @summary Alert close button
  */
.slds-notify__close {
  position: absolute;
  inset-inline-end: var(--slds-c-alert-close-spacing-inline-end);
  margin-inline-start: var(--slds-c-alert-close-margin-inline-start);
  /* transform only accepts physical values and is tied to 'top', leaving be for now */
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* LBC Button Icons need to have their custom element container ignored by layout */
  lightning-button-icon {
    display: contents;
  }
}