.#{$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; } }