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

// Internal variables
$alert-gradient: linear-gradient(45deg, var(--slds-g-color-neutral-10-opacity-10, rgba(#000, 0.025)) 25%, transparent 25%, transparent 50%, var(--slds-g-color-neutral-10-opacity-10, rgba(#000, 0.025)) 50%, var(--slds-g-color-neutral-10-opacity-10, rgba(#000, 0.025)) 75%, transparent 75%, transparent);
$alert-gradient-size-background: 64px 64px;

/**
 * @summary Initializes alert notification
 * @name base
 * @selector .slds-notify_alert
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-notify_alert,
.slds-notify--alert {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: var(--slds-c-alert-spacing-block-start, var(--slds-c-alert-spacing-blockstart, var(--sds-c-alert-spacing-block-start, $spacing-x-small)));
  padding-right: var(--slds-c-alert-spacing-inline-end, var(--slds-c-alert-spacing-inlineend, var(--sds-c-alert-spacing-inline-end, $spacing-x-large)));
  padding-bottom: var(--slds-c-alert-spacing-block-end, var(--slds-c-alert-spacing-blockend, var(--sds-c-alert-spacing-block-end, $spacing-x-small)));
  padding-left: var(--slds-c-alert-spacing-inline-start, var(--slds-c-alert-spacing-inlinestart, var(--sds-c-alert-spacing-inline-start, $spacing-x-small)));
  color: var(--slds-c-alert-text-color, var(--sds-c-alert-text-color, var(--slds-g-color-neutral-base-100, #{$color-text-inverse})));
  font-weight: var(--slds-c-alert-font-weight, var(--sds-c-alert-font-weight));
  text-align: center;
  background-color: var(--slds-c-alert-color-background, var(--sds-c-alert-color-background, var(--slds-g-color-neutral-base-50, #{$color-background-toast})));
  background-image: var(--slds-c-alert-image-background, var(--sds-c-alert-image-background, $alert-gradient));
  background-size: var(--slds-c-alert-size-background, var(--sds-c-alert-size-background, $alert-gradient-size-background));

  // Text links within an Alert
  a {
    color: currentColor;
    border: $border-width-thin solid transparent;
    border-radius: $border-radius-medium;
    text-decoration: underline;

    &:hover,
    &:focus {
      text-decoration: none;
      outline: 0;
    }

    &:focus {
      box-shadow: var(--slds-c-alert-shadow, var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus}));
      border-width: var(--slds-c-alert-sizing-border, $border-width-thin);
      border-style: solid;
      border-color: var(--slds-c-alert-color-border, transparent);
    }

    &:active {
      color: var(--slds-c-alert-text-color-active, var(--sds-c-alert-text-color-active, var(--slds-g-color-neutral-100-opacity-50, #{$color-text-link-inverse-active})));
    }

    &[disabled] {
      // @TODO: declare at shared/global level
      color: var(--slds-g-color-neutral-100-opacity-10, #{$color-text-link-inverse-disabled});
    }
  }
}

/**
 * @summary Initializes notification
 * @selector .slds-notify
 * @restrict .slds-notify_container div
 */
.slds-notify {
  /* Empty annotation for validator */
}

/**
 * @summary Sets styling for warning alert notification
 * @selector .slds-alert_warning
 * @restrict .slds-notify_alert
 */
.slds-alert_warning {
  /*! @css-var-fallback background-color */
  --slds-c-alert-color-background: var(--slds-g-color-warning-base-60, #{$color-background-warning});
  color: var(--slds-g-color-neutral-base-10, #{$color-text-default});

  .slds-icon,
  .slds-button__icon {
    fill: var(--slds-g-color-neutral-base-30, #{$color-gray-10});
  }

  .slds-button:focus {
    box-shadow: var(--slds-g-shadow-inset-focus-1);
  }
}

/**
 * @summary Sets styling for error alert notification
 * @selector .slds-alert_error
 * @restrict .slds-notify_alert
 */
.slds-alert_error {
  /*! @css-var-fallback background-color */
  --slds-c-alert-color-background: var(--slds-g-color-error-base-40, #{$color-background-toast-error});
}

/**
 * @summary Sets styling for offline alert notification
 * @selector .slds-alert_offline
 * @restrict .slds-notify_alert
 */
.slds-alert_offline {
  /*! @css-var-fallback background-color */
  --slds-c-alert-color-background: var(--slds-g-color-neutral-base-30, #{$palette-neutral-30});
}

/**
  * @summary Alert close button
  * @selector .slds-notify__close
  * @restrict .slds-notify_alert div
  */
.slds-notify__close {
  position: absolute;
  top: 50%;
  right: $spacing-small;
  margin-left: $spacing-xx-small;
  transform: translateY(-50%);
}