@import "../varibles";

@mixin toast-theme($name, $color) {
    &.ui-#{$name} {
        color: #fff;
        background-color: hsla(hue($color), saturation($color), lightness($color), .9);
    }
}

ui-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -150px * $screen-scale;
    width: 300px * $screen-scale;
    z-index: $toast-z-index;
}
.ui-toast {
    position: absolute;
    width: 100%;
    padding: $grid-column-padding;
    overflow: hidden;
    text-align: center;

    transform: translateY(-50%);

    @if $toast-radius-is-open {
        border-radius: $radius-lg;
    }
    @include toast-theme(default, $color-darker);
    @include toast-theme(primary, $color-primary);
    @include toast-theme(info, $color-info);
    @include toast-theme(success, $color-success);
    @include toast-theme(warning, $color-warning);
    @include toast-theme(danger, $color-danger);
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.ui-toast-fadein {
    animation-name: fadeIn;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 0.15s;
}

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.ui-toast-fadeout {
    animation-name: fadeOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 0.15s;
}