/**
 * 1. Allow list to expand as items are added, but cap it at the screen height.
 * 2. Allow some padding for shadow
 */
.euiGlobalToastList {
  @include euiScrollBar;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  z-index: $euiZToastList;
  bottom: 0;
  width: $euiToastWidth + ($euiSize * 5); /* 2 */
  max-height: 100vh; /* 1 */
  overflow-y: auto;

  // Hide the scrollbar entirely
  // sass-lint:disable-block no-misspelled-properties
  scrollbar-width: none;

  // sass-lint:disable-block no-vendor-prefixes
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  // The top and bottom padding give height to the list creating a dead-zone effect
  // when there's no toasts in the list, meaning you can't click anything beneath it.
  // Only add the padding if there's content.
  &:not(:empty) {
    padding: $euiSize;
  }
}

.euiGlobalToastList--right:not(:empty) {
  right: 0;
  padding-left: $euiSize * 4; /* 2 */
}

.euiGlobalToastList--left:not(:empty) {
  left: 0;
  padding-right: $euiSize * 4; /* 2 */
}

.euiGlobalToastListItem {
  margin-bottom: $euiSize;
  animation: $euiAnimSpeedNormal euiShowToast $euiAnimSlightResistance;
  opacity: 1;

  /**
   * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
   *    items to the bottom instead.
   */
  &:first-child {
    margin-top: auto; /* 1 */
  }

  &:last-child {
    margin-bottom: 0;
  }

  &.euiGlobalToastListItem-isDismissed {
    transition: opacity $euiAnimSpeedNormal;
    opacity: 0;
  }
}

@keyframes euiShowToast {
  from {
    transform: translateY($euiSizeL) scale(.9);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@include euiBreakpoint('xs', 's') {
  /**
   * 1. Mobile we make these 100%. Matching change happens on the item as well.
   */
  .euiGlobalToastList:not(:empty) {
    left: 0;
    padding-left: $euiSize;
    padding-right: $euiSize;
    width: 100%; /* 1 */
  }
}