/* Toast stack animations — loaded with shared/_toast.html.erb */

[data-controller="toast"] .toast-item {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  user-select: none;
  z-index: var(--toast-z-index, 100);
  top: var(--toast-top, auto);
  bottom: var(--toast-bottom, auto);
  transform: var(--toast-transform, translateY(0));
  scale: var(--toast-scale, 100%);
  opacity: var(--toast-opacity, 1);
  transition:
    transform 400ms ease,
    opacity 400ms ease,
    scale 400ms ease,
    top 400ms ease,
    bottom 400ms ease,
    height 200ms ease;
}

[data-controller="toast"] .toast-item[data-mounted="false"] {
  opacity: 0;
}

[data-controller="toast"] .toast-item[data-mounted="false"][data-position*="bottom"] {
  transform: translateY(100%);
}

[data-controller="toast"] .toast-item[data-mounted="false"][data-position*="top"] {
  transform: translateY(-100%);
}

[data-controller="toast"] .toast-item[data-removed="true"] {
  opacity: 0;
  scale: 95%;
  pointer-events: none;
}

[data-controller="toast"] .toast-item[data-removed="true"][data-expanded="false"][data-position*="bottom"] {
  transform: translateY(calc(var(--toast-index) * 14px + 5%));
}

[data-controller="toast"] .toast-item[data-removed="true"][data-expanded="false"][data-position*="top"] {
  transform: translateY(calc(-1 * (var(--toast-index) * 14px + 5%)));
}

[data-controller="toast"] .toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="bottom"] {
  transform: translateY(calc(-1 * (var(--toast-index) * 14px + 25%)));
  scale: 78%;
}

[data-controller="toast"] .toast-item[data-removed="true"][data-overflow="true"][data-expanded="false"][data-position*="top"] {
  transform: translateY(calc(var(--toast-index) * 14px + 25%));
  scale: 78%;
}

[data-controller="toast"] .toast-item[data-visible="false"] {
  pointer-events: none;
}

[data-controller="toast"] .toast-item[data-expanded="true"] {
  --toast-scale: 100%;
  height: var(--initial-height);
}

[data-controller="toast"] .toast-item[data-expanded="true"][data-position*="bottom"] {
  --toast-top: auto;
  --toast-bottom: var(--toast-offset, 0px);
  --toast-transform: translateY(0);
}

[data-controller="toast"] .toast-item[data-expanded="true"][data-position*="top"] {
  --toast-top: var(--toast-offset, 0px);
  --toast-bottom: auto;
  --toast-transform: translateY(0);
}

[data-controller="toast"] .toast-item[data-expanded="false"][data-front="true"] {
  --toast-scale: 100%;
  --toast-opacity: 1;
  height: var(--initial-height);
}

[data-controller="toast"] .toast-item[data-expanded="false"][data-front="true"][data-position*="bottom"] {
  --toast-top: auto;
  --toast-bottom: 0px;
  --toast-transform: translateY(0);
}

[data-controller="toast"] .toast-item[data-expanded="false"][data-front="true"][data-position*="top"] {
  --toast-top: 0px;
  --toast-bottom: auto;
  --toast-transform: translateY(0);
}

[data-controller="toast"] .toast-item[data-expanded="false"]:not([data-front="true"]) {
  height: var(--front-toast-height);
  overflow: hidden;
  --toast-scale: calc(100% - (var(--toast-index) * 6%));
  display: flex;
  flex-direction: column;
}

[data-controller="toast"] .toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="bottom"] {
  --toast-top: auto;
  --toast-bottom: 0px;
  --toast-transform: translateY(calc(-1 * var(--toast-index) * 14px));
  justify-content: flex-start;
}

[data-controller="toast"] .toast-item[data-expanded="false"]:not([data-front="true"])[data-position*="top"] {
  --toast-top: 0px;
  --toast-bottom: auto;
  --toast-transform: translateY(calc(var(--toast-index) * 14px));
  justify-content: flex-end;
}

[data-controller="toast"] .toast-item[data-expanded="false"][data-visible="false"] {
  --toast-opacity: 0;
  --toast-scale: 82%;
}

[data-controller="toast"] .toast-item[data-expanded="false"][data-visible="false"][data-position*="bottom"] {
  --toast-top: auto;
  --toast-bottom: -200px;
  --toast-transform: translateY(0);
}

[data-controller="toast"] .toast-item[data-expanded="false"][data-visible="false"][data-position*="top"] {
  --toast-top: -200px;
  --toast-bottom: auto;
  --toast-transform: translateY(0);
}