.#{$rt-namespace}__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
  
  &--stacked {
    position: absolute;
    width: 100%;
    transform: translate3d(0, var(--y), 0) scale(var(--s));
    transition: transform 0.3s;

    &[data-collapsed] .#{$rt-namespace}__toast-body, &[data-collapsed] .#{$rt-namespace}__close-button  {
      transition: opacity 0.1s;
    }

    &[data-collapsed="false"]{
      overflow: visible;
    }

    &[data-collapsed="true"]:not(:last-child) > * {
      opacity: 0;
    }

    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: calc(var(--g) * 1px);
      bottom: 100%;
    }

    &[data-pos="top"] {
      top: 0;
    }

    &[data-pos="bot"]  {
      bottom: 0;
    }

    &[data-pos="bot"]#{&}:before {
      transform-origin: top;
    }

    &[data-pos="top"]#{&}:before {
      transform-origin: bottom;
    }

    &:before{
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      transform: scaleY(3);
      z-index: -1;
    }
  }
  
  &--rtl {
    direction: rtl;
  }
  &--close-on-click {
    cursor: pointer;
  }
  &-body {
    margin: auto 0;
    flex: 1 1 auto;
    padding: 6px;
    display: flex;
    align-items: center;
    & > div:last-child {
      word-break: break-word;
      flex: 1;
    }
  }
  &-icon {
    margin-inline-end: 10px;
    width: 20px;
    flex-shrink: 0;
    display: flex;
  }
}

.#{$rt-namespace}--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.#{$rt-namespace}--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media #{$rt-mobile} {
  .#{$rt-namespace}__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}