@use '../../assets/styles/scss/index'  as *;

.snackbar {
    width: 300px;
    border-radius: 6px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

@mixin icon-container-background($color) {
    background: linear-gradient(180deg, lighten($color, 10%) 0%, $color 100%);
}

.icon-container {
    width: 20%;
    display: flex;

    &.danger {
        @include icon-container-background($fire);
    }

    &.warning {
        @include icon-container-background($sun);
    }

    &.success {
        @include icon-container-background($grass);
    }

    &.info {
        @include icon-container-background($sky);
    }
}

.action-icon {
    width: 24px;
    margin: auto;
    fill: white;
}

.close-icon {
    padding: 9px 9px 9px 3px;
}

.main-path {
    width: 80%;
    display: flex;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
}

.content {
    width: 85%;
}
