.#{$rt-namespace}__toast-container {
    z-index: $rt-z-index;
    -webkit-transform: translate3d(0, 0, #{$rt-z-index}px);
    position: fixed;
    padding: 4px;
    width: $rt-toast-width;
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    &--top-left {
        top: 4em;
        left: 1em;
    }
    &--top-center {
        top: 4em;
        left: 50%;
        margin-left: -($rt-toast-width / 2);
    }
    &--top-right {
        top: 4em;
        right: 1em;
    }
    &--bottom-left {
        bottom: 1em;
        left: 1em;
    }
    &--bottom-center {
        bottom: 1em;
        left: 50%;
        margin-left: -($rt-toast-width / 2);
    }
    &--bottom-right {
        bottom: 1em;
        right: 1em;
    }
    &:hover{
        .#{$rt-namespace}__toast {
            width: 100%;
            margin-top: 0;
            margin-bottom: 1rem;
            max-height: $rt-toast-max-height !important;
            transition: max-height 800ms, margin-top 800ms, width 800ms, margin-bottom 800ms;
            &-content {
                height: fit-content;
                &::after{
                    display: none;
                }
            }
        }
    }
}
.#{$rt-namespace}__toast-clearall{
    position: fixed;
    z-index: $rt-z-index;
    margin: 0 4px;
    top: 2rem;
    right: 1rem;
    color: #4A90E2;
    display: inline-flex;
    padding: 5px;
    background: #fff;
    border: 1px solid #4A90E2;
    border-radius: 4px;
    box-shadow: -2px 4px 4px rgba(197, 197, 197, 0.25);
    margin-bottom: 10px;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    
}

@media #{$rt-mobile} {
    .#{$rt-namespace}__toast-container {
        width: 100vw;
        padding: 0;
        left: 0;
        margin: 0;
        &--top-left,
        &--top-center,
        &--top-right {
            top: 0;
        }
        &--bottom-left,
        &--bottom-center,
        &--bottom-right {
            bottom: 0;
        }
        &--rtl{
          right: 0;
          left: initial;
        }
    }
}