// 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

/**
 *
 * @selector .slds-notification-container
 * @restrict div
 */
.slds-notification-container {
  position: fixed;
  display: block;
  width: ($size-medium + $spacing-x-small); // this is 320, not 300px
  right: $spacing-xx-small;
  top: $spacing-xx-small;
  padding: $spacing-xx-small $spacing-xx-small $spacing-x-small;
  z-index: $z-index-reminder;
}

/**
 * @name base
 * @selector .slds-notification
 * @restrict .slds-notification-container section, .slds-notification-container div
 * @support dev-ready
 * @variant
 */
.slds-notification {
  position: relative;
  width: $size-medium; // this is 320, not 300px
  border: 1px solid var(--slds-g-color-border-base-1, #{$color-border-reminder});
  border-radius: $border-radius-medium;
  box-shadow: $shadow-reminder;
  transition-duration: $duration-slowly;
  transition-timing-function: ease-in-out;
  transition-property:
    margin,
    max-height,
    opacity,
    top;

  .slds-media__body {
    opacity: 1;
    transition-property: opacity;
    transition-duration: $duration-slowly;
    transition-timing-function: ease-in-out;
  }

  + .slds-notification {
    margin-top: $spacing-x-small;
  }

  @for $i from 1 through 4 {

    &:nth-of-type(#{$i}) {
      z-index: (5 - $i);
    }
  }

  &:nth-of-type(n+3) {
    overflow: hidden;
  }

  &:nth-of-type(n+4) {
    margin-top: 0;
    transform: scaleX(0.95) translateY(-90%);
  }

  &:nth-of-type(n+4) .slds-media__body,
  &:nth-of-type(n+5) {
    opacity: 0;
  }

  &:nth-of-type(n+6) {
    display: none;
  }
}

/**
 * @summary The body of the notification
 *
 * @selector .slds-notification__body
 * @restrict .slds-notification div
 */

/**
 * @summary Main reminder component
 *
 * @selector .slds-notification__target
 * @restrict .slds-notification__body a
 */
.slds-notification__target {
  padding: $spacing-small;
  border-radius: $border-radius-medium;
  background-color: var(--slds-g-color-neutral-base-95, #{$color-background-reminder});
  color: var(--slds-g-color-neutral-base-10, #{$color-text-default});

  &:hover,
  &:focus {
    background-color: var(--slds-g-color-neutral-base-100, #{$color-background-reminder-hover});
    text-decoration: none;
  }

  &:focus {
    box-shadow: inset var(--slds-g-shadow-outline-focus-1);
    outline: 0;
  }
}

/**
 * @summary Optional notification footer
 *
 * @selector .slds-notification__footer
 * @restrict .slds-notification div
 */
.slds-notification__footer {
  padding: $spacing-small $spacing-small $spacing-medium $spacing-small;
}

/**
 * @summary Notification close button
 *
 * @selector .slds-notification__close
 * @restrict .slds-notification__body button
 */
.slds-notification__close {
  position: absolute;
  top: 0;
  right: 0;

  &:focus {
    box-shadow: var(--slds-g-shadow-inset-inverse-focus-1, #{$shadow-button-focus});
    outline: 0;
  }
}