/* === Notifications === */
@notificationsDuration: 450ms;
.notifications {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10900;
    color: #fff;
    font-size: 14px;
    margin: 0;
    border: none;
    display: none;
    box-sizing: border-box;
    max-height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    .transition(@notificationsDuration);
    -webkit-perspective:1200px;
    perspective:1200px;

    &.list-block > ul {
        .hairline-remove(top);
        .hairline-remove(bottom);
        max-width: 568px;
        background: #323232;
        margin: 0 auto;
    }
    .item-content {
        .align-items(flex-start);
        padding-left: 24px;
    }
    .item-title {
        font-size: 14px;
        font-weight: normal;
        white-space: normal;
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .item-inner {
        padding-right: 24px;
        padding-top: 0;
        padding-bottom: 0;
        .hairline-remove(bottom);
    }
    .item-after {
        max-height: none;
        margin-left: 16px;
    }
    .button.close-notification {
        color: lighten(saturate(@themeColor, 10%), 10%);
    }
    .notification-item {
        margin: 0 auto;
        .transition(@notificationsDuration);
        .delay(100ms);
        .translate3d(0,0,0);
        opacity: 1;
    }
    .notification-hidden {
        opacity: 0;
        .delay(0ms);
        .translate3d(0,0,0);
    }
    .notification-item-removing {
        .delay(0ms);
    }
    @media (min-width: 569px) {
        &.list-block > ul {
            border-radius: 2px;
            width: auto;
            min-width: 288px;
        }
    }
}