/*
  parts: .a-toast > .a-toast-status + .a-toast-content
  .a-toast-content > .a-toast-title, .a-toast-message, .a-toast-close-btn,
  .a-divider + .a-toast-actions
  colors: .a-toast--{success|notification|warning|error|processing|ai} (success default)
  ai glow: add `<span class="a-toast-glow" aria-hidden="true"></span>` as the first child of
  .a-toast--ai for the glow that travels along the border on entry
  
  top layer: add the `popover` attribute to pin the toast to a viewport corner:
  `<div class="a-toast" popover="manual" role="status">`, opened and closed with
  command="show-popover" / command="hide-popover" invokers.
  
  corner: .a-toast--{top|bottom}-{start|end} (top-end default), offset from it with
  --a-toast-offset-x / --a-toast-offset-y
  auto-dismiss: fades out after --a-toast-timeout; .a-toast--persistent stays until closed.
  The fade only hides the toast, so a listener has to call hidePopover() when the
  a-toast-dismiss animation ends to take it off the top layer — see toast.html.
  
  One toast at a time: the top layer draws open popovers on top of each other, so laying
  several toasts out in the same corner is not possible without scripting.
*/

.a-toast {
  --bg: var(--lens-semantic-color-surface-inverse);
  --radius: var(--lens-semantic-radius-lg);
  --shadow: var(--lens-semantic-shadow-high);
  --border-width: var(--lens-semantic-border-width-thin);
  --border-style: var(--lens-core-border-style-solid);
  --border-color: var(--lens-semantic-color-outline-fixed);
  --min-width: 288px;
  --max-width: 480px;
  --viewport-gap: var(--lens-core-spacing-2);
  --status-bg: var(--status-bg-variant);
  --status-color: var(--status-color-variant);
  --status-bg-variant: var(--lens-semantic-color-status-success-default);
  --status-color-variant: var(--lens-semantic-color-status-success-text-default);
  --status-icon-size: var(--lens-semantic-icon-size-lg);
  display: flex;
  position: relative;
  border-radius: var(--a-toast-radius, var(--radius));
  border: var(--a-toast-border-width, var(--border-width))
    var(--a-toast-border-style, var(--border-style))
    var(--a-toast-border-color, var(--border-color));
  box-shadow: var(--a-toast-shadow, var(--shadow));
  min-width: var(--a-toast-min-width, var(--min-width));
  max-width: min(
    calc(100svw - 2 * var(--a-toast-viewport-gap, var(--viewport-gap))),
    var(--a-toast-max-width, var(--max-width))
  );
  &.a-toast--notification {
    --status-bg-variant: var(--lens-semantic-color-status-notification-default);
    --status-color-variant: var(--lens-semantic-color-status-notification-text-default);
  }
  &.a-toast--warning {
    --status-bg-variant: var(--lens-semantic-color-status-warning-default);
    --status-color-variant: var(--lens-semantic-color-status-warning-text-default);
  }
  &.a-toast--error {
    --status-bg-variant: var(--lens-semantic-color-status-error-default);
    --status-color-variant: var(--lens-semantic-color-status-error-text-default);
  }
  &.a-toast--processing {
    --status-bg-variant: var(--lens-semantic-color-status-neutral-background-variant);
    --status-color-variant: var(--lens-semantic-color-status-neutral-text-default);
  }
  &.a-toast--ai {
    --status-bg-variant: var(--lens-semantic-color-status-notification-default);
    --status-color-variant: var(--lens-semantic-color-status-notification-text-default);
    --glow-size: var(--a-toast-ai-glow-size, 96px);
    --glow-duration: var(--a-toast-ai-glow-duration, 1000ms);
    --glow-repeat: var(--a-toast-ai-glow-repeat, 2);
    --glow-corner-size: var(--a-toast-ai-glow-corner-size, 344px);
    --glow-corner-blur: var(--a-toast-ai-glow-corner-blur, 80px);
    --glow-corner-opacity: var(--a-toast-ai-glow-corner-opacity, 0.3);
    --glow-corner-duration: var(--a-toast-ai-glow-corner-duration, 2000ms);
    --glow-corner-offset: var(--a-toast-ai-glow-corner-offset, calc(var(--glow-corner-size) / -2));
    --glow-corner-inset-block: var(--glow-corner-offset) auto;
    --glow-corner-inset-inline: auto var(--glow-corner-offset);
    &:is(.a-toast--top-start, .a-toast--bottom-start) {
      --glow-corner-inset-inline: var(--glow-corner-offset) auto;
    }
    &:is(.a-toast--bottom-start, .a-toast--bottom-end) {
      --glow-corner-inset-block: auto var(--glow-corner-offset);
    }
    isolation: isolate;
    border: none;
    padding: var(--a-toast-border-width, var(--border-width));
    background: var(--a-toast-border-color, var(--border-color));
    &::before {
      content: "";
      position: absolute;
      inset-block: var(--glow-corner-inset-block);
      inset-inline: var(--glow-corner-inset-inline);
      width: var(--glow-corner-size);
      height: var(--glow-corner-size);
      border-radius: var(--lens-semantic-radius-full);
      background-image: var(--lens-semantic-gradients-ai-shape);
      filter: blur(var(--glow-corner-blur));
      opacity: 0;
      animation: a-toast-ai-corner-pulse var(--glow-corner-duration) ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
      @media (prefers-reduced-motion: reduce) {
        animation: none;
        opacity: var(--glow-corner-opacity);
      }
    }
    & > .a-toast-status,
    & > .a-toast-content {
      position: relative;
      z-index: 1;
    }
  }
}

.a-toast:where([popover]) {
  --offset-x: var(--a-toast-offset-x, var(--lens-core-spacing-3));
  --offset-y: var(--a-toast-offset-y, var(--lens-core-spacing-3));
  --viewport-gap: var(--a-toast-viewport-gap, var(--offset-x));
  --timeout: var(--a-toast-timeout, 6s);
  --enter-duration: var(--a-toast-enter-duration, var(--a-transition-duration));
  --dismiss-duration: var(--a-toast-dismiss-duration, 250ms);
  --enter-from: -100%;
  display: none;
  position: fixed;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  inset-block: var(--offset-y) auto;
  inset-inline: auto var(--offset-x);
  &.a-toast--top-start,
  &.a-toast--bottom-start {
    inset-inline: var(--offset-x) auto;
  }
  &.a-toast--bottom-start,
  &.a-toast--bottom-end {
    --enter-from: 100%;
    inset-block: auto var(--offset-y);
  }
  &:popover-open {
    display: flex;
    animation:
      a-toast-enter var(--enter-duration) var(--a-transition-easing),
      a-toast-dismiss var(--dismiss-duration) var(--a-transition-easing) var(--timeout) forwards;
  }
  &.a-toast--persistent:popover-open {
    animation-name: a-toast-enter;
  }
}

.a-toast-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--a-toast-radius, var(--radius));
  overflow: clip;
  pointer-events: none;
  &::before {
    content: "";
    position: absolute;
    width: var(--glow-size);
    height: var(--glow-size);
    background-image: radial-gradient(
      circle closest-side,
      var(--lens-semantic-color-ai-default-gradient-start) 0%,
      var(--lens-semantic-color-ai-default-gradient-middle) 50%,
      var(--lens-semantic-color-ai-default-gradient-end) 80%,
      transparent 100%
    );
    background-repeat: no-repeat;
    offset-path: rect(0% 100% 100% 0%);
    offset-anchor: 50% 50%;
    opacity: 0;
    animation: a-toast-ai-glow-move var(--glow-duration) linear var(--glow-repeat) both;
    @media (prefers-reduced-motion: reduce) {
      display: none;
    }
  }
}

.a-toast-status {
  --width: var(--a-toast-status-width, var(--lens-core-spacing-5));
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--a-toast-status-bg, var(--status-bg));
  color: var(--a-toast-status-color, var(--status-color));
  width: var(--width);
  border-start-start-radius: calc(
    var(--a-toast-radius, var(--radius)) - var(--a-toast-border-width, var(--border-width))
  );
  border-end-start-radius: calc(
    var(--a-toast-radius, var(--radius)) - var(--a-toast-border-width, var(--border-width))
  );
}

.a-toast-status-icon {
  width: var(--a-toast-status-icon-size, var(--status-icon-size));
  height: var(--a-toast-status-icon-size, var(--status-icon-size));
  &:is(svg),
  & svg {
    fill: currentColor;
  }
}

.a-toast-content {
  --pl: var(--a-toast-content-pl, var(--lens-semantic-spacing-desktop-padding-3));
  --pr: var(--a-toast-content-pr, var(--lens-semantic-spacing-desktop-padding-0-5));
  --py: var(--a-toast-content-py, var(--lens-semantic-spacing-desktop-padding-0-5));
  --gap-x: var(--a-toast-content-gap-x, var(--lens-semantic-spacing-desktop-gap-1));
  --gap-y: var(--a-toast-content-gap-y, var(--lens-semantic-spacing-desktop-gap-0));
  --content-color: var(--a-toast-content-color, var(--lens-semantic-color-type-inverse));
  display: grid;
  grid-template-columns: auto min-content;
  flex-grow: 1;
  align-items: center;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  background: var(--a-toast-bg, var(--bg));
  color: var(--content-color);
  padding-inline-start: var(--pl);
  padding-inline-end: calc(var(--pr) - var(--a-toast-border-width, var(--border-width)));
  padding-block: calc(var(--py) - var(--a-toast-border-width, var(--border-width)));
  border-start-end-radius: calc(
    var(--a-toast-radius, var(--radius)) - var(--a-toast-border-width, var(--border-width))
  );
  border-end-end-radius: calc(
    var(--a-toast-radius, var(--radius)) - var(--a-toast-border-width, var(--border-width))
  );
  & .a-btn.a-btn--tertiary {
    --color: var(--content-color);
  }
  & .a-toast-title,
  & .a-toast-message {
    grid-column: 1;
  }
  & .a-toast-close-btn {
    grid-row: 1 / 3;
    grid-column: 2;
  }
  & .a-divider {
    grid-row: 3;
  }
  & .a-toast-actions {
    grid-row: 4;
  }
  &:not(:has(.a-toast-message)) .a-toast-title,
  &:not(:has(.a-toast-title)) .a-toast-message {
    grid-row: 1 / 3;
  }
  &:has(.a-toast-title):has(.a-toast-message),
  &:has(.a-toast-actions) {
    --pl: var(--a-toast-content-pl, var(--lens-semantic-spacing-desktop-padding-2));
    & .a-toast-title {
      margin-block-start: var(--lens-semantic-spacing-desktop-padding-1);
      margin-inline-start: var(--lens-semantic-spacing-desktop-padding-2);
    }
    & .a-toast-message {
      margin-block-start: var(--lens-semantic-spacing-desktop-padding-1-5);
      margin-block-end: var(--lens-semantic-spacing-desktop-padding-2);
      margin-inline-start: var(--lens-semantic-spacing-desktop-padding-2);
    }
    &:has(.a-toast-title) .a-toast-message {
      margin-block-start: var(--lens-semantic-spacing-desktop-padding-0-5);
    }
    &:not(:has(.a-toast-actions)) :is(.a-toast-title, .a-toast-message) {
      margin-block-end: var(--lens-semantic-spacing-desktop-padding-1);
    }
  }
  &:has(.a-toast-title):has(.a-toast-message) {
    align-items: start;
  }
  &:has(.a-toast-actions) {
    --gap-y: var(--a-toast-content-gap-y, var(--lens-semantic-spacing-desktop-gap-1));
    --pr: var(--a-toast-content-pr, var(--lens-semantic-spacing-desktop-padding-1));
    grid-template-columns: auto;
  }
}

.a-toast-title,
.a-toast-message {
  height: fit-content;
  margin: 0;
  &:is(div, span, p, h1, h2, h3, h4, h5, h6) {
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: inherit;
  }
}

.a-toast-title {
  --font-size: var(--a-toast-title-font-size, var(--lens-semantic-font-title-h3-lg-font-size));
  --font-weight: var(--a-toast-title-font-weight, var(--lens-semantic-font-weight-emphasis));
  --line-height: var(
    --a-toast-title-line-height,
    var(--lens-semantic-font-title-h3-lg-line-height)
  );
  --letter-spacing: var(
    --a-toast-title-letter-spacing,
    var(--lens-semantic-font-title-h3-lg-letter-spacing)
  );
}

.a-toast-message {
  --font-size: var(--a-toast-message-font-size, var(--lens-semantic-font-text-body-font-size));
  --font-weight: var(
    --a-toast-message-font-weight,
    var(--lens-semantic-font-text-body-font-weight)
  );
  --line-height: var(
    --a-toast-message-line-height,
    var(--lens-semantic-font-text-body-line-height)
  );
  --letter-spacing: var(
    --a-toast-message-letter-spacing,
    var(--lens-semantic-font-text-body-letter-spacing)
  );
  --line-clamp: var(--a-toast-message-line-clamp, 6);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: var(--line-clamp);
  -webkit-line-clamp: var(--line-clamp);
}

.a-toast-actions {
  --px: var(--a-toast-actions-px, var(--lens-semantic-spacing-desktop-padding-0-5));
  --pt: var(--a-toast-actions-pt, var(--lens-semantic-spacing-desktop-padding-0-5));
  --gap: var(--a-toast-actions-gap, var(--lens-semantic-spacing-desktop-gap-1-5));
  display: flex;
  padding-inline: var(--px);
  padding-block-start: var(--pt);
  gap: var(--gap);
  justify-self: end;
}

.a-toast .a-btn.a-btn--tertiary {
  --color: var(--lens-semantic-color-action-secondary-inverse-on-secondary-inverse);
  &:hover {
    --bg: var(--lens-semantic-color-action-secondary-inverse-hover);
  }
  &:active,
  &.a-btn--active {
    --bg: var(--lens-semantic-color-action-secondary-inverse-active);
  }
  &[disabled],
  &[aria-disabled="true"] {
    --color: var(--lens-semantic-color-action-secondary-inverse-on-secondary-inverse-disabled);
  }
}

@keyframes a-toast-enter {
  from {
    opacity: 0;
    translate: 0 var(--enter-from);
  }
}

@keyframes a-toast-dismiss {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes a-toast-ai-glow-move {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}

@keyframes a-toast-ai-corner-pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: var(--glow-corner-opacity);
  }
  100% {
    opacity: 0;
  }
}