@import '../1-Helpers/variables';
@import '../2-Tools/transitions';

.toast-container {
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: flex;
    flex-direction: column;
}
.toast {
    padding: 1rem 1.25rem;
    border-radius: 5px;
    text-transform: capitalize;
    background: $toast-default-background-color;
    color: $toast-default-text-color;
    z-index: 9;
    margin-bottom: .5rem;
    transition: $transition-fast-out;
    
    // default state
    transform: translateX(-100%);
    opacity: 0;
    display: none;
        
    &.info {
        background: $toast-info-background-color;
        color: $toast-info-text-color;
    }

    &.error {
        background: $toast-error-background-color;
    }

    &.warn {
        background: $toast-warn-background-color;
    }

    &.success {
        background: $toast-success-background-color;
    }

}