@use '../abstracts' as *;

.presszone-comments-toast-container {
    position: fixed;
    bottom: $presszone-comments-spacing-xl;
    inset-inline-end: $presszone-comments-spacing-xl;
    z-index: $presszone-comments-z-index-toast;
    display: flex;
    flex-direction: column;
    gap: $presszone-comments-spacing-sm;
}

.presszone-comments-toast {
    padding: $presszone-comments-spacing-md $presszone-comments-spacing-xl;
    border-radius: $presszone-comments-radius-lg;
    border-inline-start: $presszone-comments-border-width-xl solid $presszone-comments-accent;
    box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-shadow; // Default value
    min-width: $presszone-comments-toast-min-width;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: presszone-comments-fade-in $presszone-comments-duration-normal $presszone-comments-ease-smooth;

    @include theme-props(('background-color': 'modal-bg', // Using modal-bg to ensure solid background in inherit mode
            'color': 'text-primary'
        ));

    // Dark mode shadow
    @include dark-mode {
        box-shadow: 0 $presszone-comments-shadow-offset-y $presszone-comments-shadow-spread $presszone-comments-dark-shadow;
    }

    &--success {
        border-inline-start-color: $presszone-comments-success;
    }

    &--error {
        border-inline-start-color: $presszone-comments-error;
    }

    &--info {
        border-inline-start-color: $presszone-comments-accent;
    }

    &--out {
        animation: presszone-comments-fade-out $presszone-comments-duration-normal $presszone-comments-ease-smooth forwards;
    }
}

@keyframes presszone-comments-fade-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes presszone-comments-fade-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

// RTL overrides for toast animations
[dir="rtl"] {
    .presszone-comments-toast {
        animation-name: presszone-comments-fade-in-rtl;

        &--out {
            animation-name: presszone-comments-fade-out-rtl;
        }
    }
}

@keyframes presszone-comments-fade-in-rtl {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes presszone-comments-fade-out-rtl {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}