@charset "utf-8";

/* ========================================================================
   JUICE -> COMPONENTS -> TOAST
   ========================================================================  */

// Check if the components with toast should be imported
@if $import-components and $import-component-toast {
    .toast-group {
        align-items: flex-start;
        bottom: 0;
        display: flex;
        flex-direction: column-reverse;
        left: 0;
        pointer-events: none;
        position: fixed;
        width: 100%;
        z-index: stack-index('toast');

        // Nested selectors
        .toast {
            align-items: center;
            animation-duration: $toast-animation-duration;
            background-color: $toast-background-color;
            border: 0 $toast-border-style $toast-border-color;
            border-bottom-left-radius: $toast-border-radius-bottom-left;
            border-bottom-width: $toast-border-width-bottom;
            border-bottom-right-radius: $toast-border-radius-bottom-right;
            border-left-width: $toast-border-width-left;
            border-right-width: $toast-border-width-right;
            border-top-left-radius: $toast-border-radius-top-left;
            border-top-right-radius: $toast-border-radius-top-right;
            border-top-width: $toast-border-width-top;
            box-shadow: $toast-box-shadow;
            color: $toast-font-color;
            display: flex;
            font-size: $toast-font-size;
            justify-content: center;
            margin: $toast-element-spacing;
            margin-top: 0;
            max-width: $toast-max-width;
            pointer-events: auto;

            // Nested selectors
            .toast__text,
            .toast__action {
                padding: $toast-content-spacing;
            }

            .toast__text {
                flex-grow: 1;
            }

            .toast__action {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            // Check if the toast feedback modifiers should be declared
            @if $toast-feedback-modifiers {
                // Cycle through all of the feedback colors
                @each $feedback-name, $color-value in $feedback-colors {
                    // Modifiers: Feedback colors
                    &.has-#{$feedback-name} {
                        // Variables
                        border-color: feedback-color($feedback-name);
                    }
                }
            }
        }

        // Check if the toast alignment modifiers should be declared
        @if $toast-alignment-modifiers {
            // Modifiers
            &.toast-group--top-left,
            &.toast-group--top,
            &.toast-group--top-right {
                bottom: auto;
                flex-direction: column;
                top: 0;

                // Nested selectors
                .toast {
                    margin: $toast-element-spacing;
                    margin-bottom: 0;
                }
            }

            &.toast-group--bottom,
            &.toast-group--top {
                align-items: center;
            }

            &.toast-group--bottom-right,
            &.toast-group--top-right {
                align-items: flex-end;
                left: auto;
                right: 0;
            }
        }
    }
}