@layer components {
  :root {
    --twentyone--toast--background-color: var(--twentyone--color--lightgrey);
    --twentyone--toast--box-shadow: var(--twentyone--shadow--medium);
    --twentyone--toast--margin: var(--twentyone--spacing--8) 0;
    --twentyone--toast--padding: var(--twentyone--spacing--8) var(--twentyone--spacing--16);
    --twentyone--toast--gap: var(--twentyone--spacing--12);
    --twentyone--toast--border-radius: var(--twentyone--spacing--8);
    --twentyone--toast--font-color: var(--twentyone--color--primary);
    --twentyone--toast--icon-color: var(--twentyone--color--primary);
    --twentyone--toast--icon-font-size: var(--twentyone--element--font-size);
    --twentyone--toast--icon-margin-top: var(--twentyone--spacing--12);
    --twentyone--toast--inverted-icon-color: var(--twentyone--color--white);
    --twentyone--toasts--margin: var(--twentyone--spacing--16);
    --twentyone--toasts--max-width: 25em;
  }
  .twentyone-toasts {
    bottom: 0;
    gap: var(--twentyone--toast--gap);
    margin: var(--twentyone--toasts--margin);
    max-width: var(--twentyone--toasts--max-width);
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    visibility: hidden;
    z-index: 99999;
    transition: var(--twentyone--element--transition);
  }
  .twentyone-toasts.is--active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
  }
  .twentyone-toast {
    align-items: center;
    background-color: var(--twentyone--toast--background-color);
    display: flex;
    fill: var(--twentyone--toast--icon-color);
    flex-wrap: nowrap;
    font-size: 1em;
    gap: var(--twentyone--toast--gap);
    justify-content: space-between;
    margin: var(--twentyone--toast--margin);
    opacity: 0;
    padding: var(--twentyone--toast--padding);
    position: relative;
    visibility: hidden;
    box-shadow: var(--twentyone--toast--box-shadow);
    border-radius: var(--twentyone--toast--border-radius);
    transition: var(--twentyone--element--transition);
    translate: 0 -50%;
  }
  .twentyone-toast[data-state=error] {
    background-color: var(--twentyone--color--red);
  }
  .twentyone-toast[data-state=error] svg {
    fill: white !important;
  }
  .twentyone-toast[data-state=error] * {
    color: white;
  }
  .twentyone-toast[data-state=success] {
    background-color: var(--twentyone--color--green);
  }
  .twentyone-toast[data-state=success] svg {
    fill: white !important;
  }
  .twentyone-toast[data-state=success] * {
    color: white;
  }
  .twentyone-toast.align--bottom {
    align-items: flex-end;
  }
  .twentyone-toast.align--bottom > svg,
  .twentyone-toast.align--bottom > img {
    margin-bottom: var(--twentyone--toast--icon-margin-top);
    margin-top: 0;
  }
  .twentyone-toast.align--center {
    align-items: center;
  }
  .twentyone-toast.align--center > svg,
  .twentyone-toast.align--center > img {
    margin-top: 0;
  }
  .twentyone-toast.align--top {
    align-items: flex-start;
  }
  .twentyone-toast.has--tooltip .twentyone-toast-content {
    display: flex;
  }
  .twentyone-toast.is--active {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    translate: 0 0;
  }
  .twentyone-toast.is--inverted {
    fill: var(--twentyone--toast--inverted-icon-color);
  }
  .twentyone-toast.justify--left {
    flex-direction: row;
  }
  .twentyone-toast.justify--right {
    flex-direction: row-reverse;
  }
  .twentyone-toast.swiper-slide {
    height: auto;
  }
  .twentyone-toast:first-child {
    margin-top: 0;
  }
  .twentyone-toast:last-child {
    margin-bottom: 0;
  }
  .twentyone-toast::before {
    display: none;
  }
  .twentyone-toast .twentyone-button {
    margin: 0;
    position: relative;
    right: unset;
    top: unset;
  }
  .twentyone-toast .twentyone-icon-text-content {
    color: var(--twentyone--toast--font-color);
  }
  .twentyone-toast .twentyone-icon-text-content * {
    color: var(--twentyone--toast--font-color);
  }
  .twentyone-toast p + .twentyone-button {
    margin-top: 0.5em;
  }
  .twentyone-toast > .twentyone-icon svg,
  .twentyone-toast > .twentyone-icon img {
    aspect-ratio: 1/1;
    flex: 0 0 auto;
    fill: var(--twentyone--toast--icon-color);
    font-size: var(--twentyone--toast--icon-font-size);
    height: auto;
    object-fit: contain;
    width: 1em;
    transition: var(--twentyone--element--transition);
  }
}