.notifications__wrapper {
    position: fixed;
    top: 100px;
    right: 20px;
    width: calc(100% - 40px);
    max-width: 360px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    row-gap: 18px;

    .notifications__item {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        position: relative;
        padding: 12px 16px 14px;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: translateX(10px);
        transition: all .3s ease;

        &.notifications__item--visible {
            opacity: 1;
            transform: translateX(0px);
        }

        &:before {
            content: "";
            display: block;
            position: absolute;
            bottom: 0px;
            left: 0;
            width: calc(var(--progress) * 1%);
            height: 2px;
            background-color: #ffffff;
            transition: width .3s ease;
        }

        &.notifications__item--success {
            background-color: #2ECC71;
        }

        &.notifications__item--error {
            background-color: #E14D45;
        }

        &.notifications__item--warning {
            background-color: #ED991D;
        }

        &.notifications__item--info {
            background-color: #3C90D1;
        }

        .notifications__close {
            position: absolute;
            top: 0px;
            right: 0;
            width: 30px;
            height: 30px;
            fill: #ffffff;
        }

        .notifications__icon {
            grid-row: 1/3;
            align-self: center;
            display: flex;
            fill: none;
            stroke: #ffffff;
        }

        .notifications__title {
            color: #ffffff;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0.2px;
            margin-bottom: 4px;
        }

        .notifications__text {
            color: #ffffff;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0.14px;
        }

        
    }
}