@import '../../common/styles/media/_screen';
@import '../../common/styles/_notification-variables';
@import '../../common/styles/colors';
@import '../../common/styles/text-base';
@import './notification-manager';
@import '../../common/styles/rounded-corner-base';

.bloko-notification {
    animation: notify-show 1.2s ease-out forwards;
    pointer-events: none;

    @media print {
        display: none;
    }
}

.bloko-notification_inactive {
    animation: notify-hide 0.2s ease-out both;
}

.bloko-notification_inactive .bloko-notification__plate {
    animation: notify-plate-hide 0.3s forwards;
}

.bloko-notification_ok {
    .bloko-notification__plate {
        border-color: @notification-color-ok;
    }

    .bloko-notification__icon {
        background-image: url('ok.svg');
    }
}

.bloko-notification_error {
    .bloko-notification__plate {
        border-color: @notification-color-danger;
    }

    .bloko-notification__icon {
        background-image: url('warning.svg');
    }
}

.bloko-notification_delete .bloko-notification__icon {
    background-image: url('trash.svg');
}

.bloko-notification_message {
    .inverted-text-mixin();

    .bloko-notification__plate {
        background-color: @notification-color-message;
        border-left-color: transparent;
    }

    .bloko-notification__icon {
        background-image: url('message.svg');
    }
}

.bloko-notification_question {
    .inverted-text-mixin();

    .bloko-notification__plate {
        background-color: @notification-color-question;
        border-left-color: transparent;
    }

    .bloko-notification__icon {
        background-image: url('question.svg');
    }
}

.bloko-notification_rating {
    .inverted-text-mixin();

    .bloko-notification__plate {
        background-color: @notification-color-rating;
        border-left-color: transparent;
    }

    .bloko-notification__icon {
        background-image: url('rating.svg');
    }
}

.bloko-notification_special {
    .inverted-text-mixin();

    .bloko-notification__plate {
        background-color: @notification-color-special;
        border-left-color: transparent;
    }

    .bloko-notification__icon {
        background-image: url('rating.svg');
    }
}

.bloko-notification__wrapper {
    padding-bottom: 15px;
    margin: 0 10px;

    @media @screen-gt-xs {
        margin: 0 30px 0 0;
    }
}

.bloko-notification__plate {
    display: flex;
    box-sizing: border-box;
    background-color: @notification-background-color;
    position: relative;
    pointer-events: auto;
    margin: auto;
    max-width: @notification-width-xs;
    border-radius: @rounded-corner-default;
    box-shadow: 0 6px 16px fade(@color-gray-80, 25%);
    animation: notify-plate-show 0.6s 0.2s ease-out both;
    border-left: @notification-border-width solid @notification-color-info;

    @media @screen-gt-xs {
        width: @notification-width;
    }
}

.bloko-notification__icon {
    width: 62px;
    height: 62px;
    background: url('info.svg') no-repeat center;
}

.bloko-notification__body {
    display: flex;
    flex: 1;
    align-self: center;
    margin: 15px 15px 15px 0;
    color: @notification-body-color;
    .bloko-text-medium();
}

.bloko-notification__content {
    flex: 1;
    word-break: break-word;
}

.bloko-notification__close {
    align-self: start;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.1s;
}

.bloko-notification__close:hover {
    opacity: 1;
}

.bloko-notification__heading {
    margin-bottom: 5px;
    color: @color-gray-80;
    .bloko-text-strong();
}

.bloko-notification__footer {
    margin-top: 10px;
}

.inverted-text-mixin() {
    .bloko-notification__heading {
        color: @color-white;
    }

    .bloko-notification__content {
        color: @color-white;
    }
}

@keyframes notify-show {
    0% {
        max-height: 0;
    }

    100% {
        max-height: @notification-max-height;
    }
}

@keyframes notify-plate-show {
    0% {
        transform: translateX(150%);
    }

    25% {
        transform: translateX(-50px);
    }

    50% {
        transform: translateX(20px);
    }

    90% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes notify-hide {
    0% {
        max-height: @notification-max-height;
    }

    100% {
        max-height: 0;
    }
}

@keyframes notify-plate-hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}