/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 1. Allow list to expand as items are added, but cap it at the screen height.
 * 2. Allow some padding for shadow
 */
.ouiGlobalToastList {
  @include ouiScrollBar;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: fixed;
  z-index: $ouiZToastList;
  bottom: 0;
  width: $ouiToastWidth + ($ouiSize * 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: $ouiSize;
  }
}

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

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

.ouiGlobalToastListItem {
  margin-bottom: $ouiSize;
  animation: $ouiAnimSpeedNormal ouiShowToast $ouiAnimSlightResistance;
  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;
  }

  &.ouiGlobalToastListItem-isDismissed {
    transition: opacity $ouiAnimSpeedNormal;
    opacity: 0;
  }
}

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

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

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