$snackbarsClass: pl-snackbars;
$snackClass: pl-snack;

.#{$snackbarsClass} {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;

    .#{$snackClass} {
        background: theme-color("dark");
        color: theme-color("light");
        position: relative;
        min-width: 360px;
        max-width: 480px;
        border-radius: 4px;
        padding: 16px 0 16px 16px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        &--text {
            word-wrap: break-word;
            overflow: hidden;
            font-weight: 300;
            flex-grow: 2;
            margin-right: 1rem;
        }

        &--actions {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            align-self: flex-start;
            flex-wrap: wrap;
            flex-shrink: 2;
            flex-grow: 1;
            
        }

        &--close {
            margin-right: 1rem;

            .close {
                color: theme-color('light');
                opacity: 1;
                font-size: 1.8rem;
            }
        }

        &--action {
            cursor: pointer;
            color: theme-color("primary");
            margin-right: 1rem;
        }
    }

    &.bottom-left {
        left: 30px;
        bottom: 20px;
        align-items: flex-start;
    }

    &.bottom-center {
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 20px;
        align-items: center;
    }

    &.bottom-right {
        right: 30px;
        bottom: 20px;
        align-items: flex-end;
    }

    &.top-left {
        left: 30px;
        top: 30px;
        align-items: flex-start;
    }

    &.top-center {
        left: 50%;
        transform: translate(-50%, 0);
        top: 30px;
        align-items: center;
    }

    &.top-right {
        right: 30px;
        top: 30px;
        align-items: flex-end;
    }
}