@import '../../style_config/config.scss';

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  animation: Toastify__trackProgress linear 1;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    50% {
        opacity: 1;
    }
}
    
.zoomIn {
    animation-name: zoomIn;
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }
    100% {
        transform: translateX(30px);
        opacity: 0;
    }
}

.zoomOut {
    animation-name: zoomOut;
}
    
.animate {
    animation-duration: 800ms;
}

.Toastify {
    position:relative;
    z-index: $z-index-10;
    font-weight: 600;
    animation-fill-mode: forwards;
    
    &__toast-container {
        position:fixed;
        
        &--bottom-right {
            right: $toast-position-x;
            bottom: $toast-position-y;
        }
        @include response($tablet) {
            &--bottom-right {
                left: 0;
                right: 0;
                display:flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
            }   
        }
    }
    
    &__toast {
        border-radius: $standard-border-radius;
        background-color: white;
        height: $toast-height;
        line-height: $toast-height;
        @extend %z-depth-1;
        padding: 0rem $toast-padding;
        box-sizing: border-box;
        margin-bottom: $toast-margin-bottom;
        user-select: none;
        
        &--warning {
            background-color: $error-color;
            color:white;
            font-weight: normal;
        }

        &--success {
            background-color: $primary-color;
            color: $primary-color-on;
            font-weight: normal;
        }
        
        &:hover {
            cursor:pointer;
        }
    }

    &__close-button {
        display: none;
    }

    &__progress-bar{
        animation: Toastify__trackProgress linear 1;
    }
}

.Toastify__toast-body {
    height: 100%;
}