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

/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

/**
 * @summary Initializes alert notification
 */
.slds-notify_alert {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block-start: var(--slds-c-alert-spacing-block-start, var(--slds-g-spacing-2));
  padding-inline-end: var(--slds-c-alert-spacing-inline-end, var(--slds-g-spacing-6));
  padding-block-end: var(--slds-c-alert-spacing-block-end, var(--slds-g-spacing-2));
  padding-inline-start: var(--slds-c-alert-spacing-inline-start, var(--slds-g-spacing-2));
  color: var(--slds-c-alert-text-color, var(--slds-g-color-on-info-1));
  font-weight: var(--slds-c-alert-font-weight);
  text-align: center;
  background-color: var(--slds-c-alert-color-background, var(--slds-g-color-info-container-1));

  .slds-icon,
  .slds-button__icon {
    fill: currentColor;
  }

  /*
    * Standalone alerts don't use theme classes to style button icons to align the
    * button-icon with the theme's styles. E.g., toast uses .slds-theme_warning,
    * a standalone warning alert does not. Alerts rely on the button-icon variants
    * in the blueprint markup depending on the feedback state, there is no relationship
    * in the CSS. Since there's no CSS relationship, enabling the button-icon to be
    * "themed" in SLDS2 is tricky since the design pattern is dictated by the
    * button-icon's variant class in the markup.
    *
    * We try to work around this below 👇
    */

  /**
    * Make the button take on the color of the alert's current state
    *
    * ⚠️ Small specificity risk with style overrides
    */
  .slds-button_icon {
    color: currentColor;
  }

  /**
    *  adding a shared hook to use same hover color for different themes in Cosmos but fallback in slds uses colormix with opacity
    */
  .slds-button_icon:hover,
  .slds-button_icon:focus-visible {
    color: var(--slds-s-alert-close-button-hover, color-mix(in oklab, currentColor, transparent 25%));
  }
}

.slds-notify_alert a {
  color: currentColor;
  border: var(--slds-g-sizing-border-1) solid transparent;
  border-radius: var(--slds-g-radius-border-2);
  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-text-color-active, color-mix(in oklab, currentColor, transparent 50%));
}

.slds-notify_alert a[disabled] {
  color: color-mix(in oklab, currentColor, transparent 90%);
}

/**
   * @summary Sets styling for warning alert notification
   */
.slds-alert_warning {
  --slds-c-alert-color-background: var(--slds-g-color-warning-container-1);
  --slds-c-alert-text-color: var(--slds-g-color-on-warning-1);
}

/**
   * @summary Sets styling for error alert notification
   */
.slds-alert_error {
  --slds-c-alert-color-background: var(--slds-g-color-error-container-1);
  --slds-c-alert-text-color: var(--slds-g-color-on-error-1);
}

/**
   * @summary Sets styling for offline alert notification
   */
.slds-alert_offline {
  /* @TODO: base-30 for slds */
  --slds-c-alert-color-background: var(--slds-g-color-neutral-base-50);
  --slds-c-alert-text-color: var(--slds-g-color-neutral-base-100);
}

/**
    * @summary Alert close button
    */
.slds-notify__close {
  position: absolute;
  inset-inline-end: var(--slds-g-spacing-3);
  margin-inline-start: var(--slds-g-spacing-1);
  /* transform only accepts physical values and is tied to 'top', leaving be for now */
  top: 50%;
  transform: translateY(-50%);
}