@use '../../../styles/base/mixin' as mixins;

$snack-bar: (
    content: (
        gap: 1rem,
    ),
    icon: (
        size: 2rem,
        color: var(--clr-white-100),
    ),
    message: (
        line-clamp: 5,
    ),
    action: (
        padding: 0.5rem,
        margin: 0 0.25rem,
        color: var(--clr-blue-80),
        background-color: var(--clr-blue-100),
    ),
    progress: (
        height: 0.5rem,
    ),
    close-button: (
        color: var(--clr-white-100),
    ),
);

:host {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    @each $element, $elements in $snack-bar {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('snack-bar', #{$element}, #{$style-token})}: #{$value};
        }
    }

    .rt-snack-bar {
        &__content {
            height: 100%;
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--rt-snack-bar-content-gap);

            &-icon-wrapper {
                margin-bottom: auto;
                line-height: 0.5;
            }

            &-icon {
                width: var(--rt-snack-bar-icon-size);
                min-width: var(--rt-snack-bar-icon-size);
                height: var(--rt-snack-bar-icon-size);
                font-size: var(--rt-snack-bar-icon-size);
                color: var(--rt-snack-bar-icon-color);
            }

            &-message {
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: var(--rt-snack-bar-message-line-clamp);
                -webkit-box-orient: vertical;
            }
        }

        &__action-button {
            position: relative;
            height: 100%;
            padding: var(--rt-snack-bar-action-padding);
            margin: var(--rt-snack-bar-action-margin);
            color: var(--rt-snack-bar-action-color);
        }

        &__close-button {
            margin-bottom: auto;

            &-icon {
                color: var(--rt-snack-bar-close-button-color);
            }
        }

        &__progress {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: var(--rt-snack-bar-progress-height);
            width: 100%;
            background-color: var(--mat-button-filled-container-color);
            border-bottom-left-radius: var(--mat-snack-bar-container-shape);
            border-bottom-right-radius: var(--mat-snack-bar-container-shape);
        }
    }
}