/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import "../../../@adobe/spectrum-css-temp/components/commons/focus-ring.css";

.react-spectrum-ToastContainer {
  composes: spectrum-FocusRing;
  --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);

  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 100050; /* above modals */
  display: flex;
  pointer-events: none;
  outline: none;
  /* keep focus ring inside the viewport */
  margin-block-end: 8px;
  margin-inline: 8px;

  .spectrum-Toast {
    margin: 8px;
    pointer-events: all;
  }

  &[data-position=top] {
    top: 0;
    flex-direction: column;
    --slide-from: translateY(-100%);
  }

  &[data-position=bottom] {
    bottom: 0;
    flex-direction: column-reverse;
    --slide-from: translateY(100%);
  }

  &[data-placement=start] {
    align-items: flex-start;
    --slide-from: translateX(-100%);

    &:dir(rtl) {
      --slide-from: translateX(100%);
    }
  }

  &[data-placement=center] {
    align-items: center;
  }

  &[data-placement=end] {
    align-items: flex-end;
    --slide-from: translateX(100%);

    &:dir(rtl) {
      --slide-from: translateX(-100%);
    }
  }
}

.spectrum-Toast {
  composes: spectrum-FocusRing;
  --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);

  position: relative;
  outline: none;

  .spectrum-Toast-contentWrapper {
    display: inline-flex;
  }
}

.spectrum-ToastContainer-list {
  display: inherit;
  flex-direction: inherit;
  align-items: inherit;
  list-style-type: none;
  margin: 0;
  padding-inline-start: 0;
}

.spectrum-ToastContainer-listitem {
  display: inline-block;
  view-transition-class: toast;
}

@keyframes slide-in {
  from {
    translate: var(--slideX) var(--slideY);
    opacity: 0;
  }
}

@keyframes slide-out {
  to {
    translate: var(--slideX) var(--slideY);
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

::view-transition-group(.toast) {
  animation-duration: 300ms;
}

::view-transition-group(.toast.bottom) {
  --slideX: 0;
  --slideY: calc(100% + 12px);
}

::view-transition-group(.toast.top) {
  --slideX: 0;
  --slideY: calc(-100% - 12px);
}

::view-transition-group(.toast.start) {
  --slideX: calc(-100% - 12px);
  --slideY: 0;
}

::view-transition-group(.toast.end) {
  --slideX: calc(100% + 12px);
  --slideY: 0;
}

::view-transition-new(.toast):only-child {
  animation-name: slide-in;
}

::view-transition-old(.toast):only-child {
  animation-name: slide-out;
}

::view-transition-old(.toast.fadeOnly):only-child {
  animation-name: fade-out;
}