/*
 *  Copyright 2018 Adobe
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@cmp-examples-notification-right: @cmp-examples-spacing-8;
@cmp-examples-notification-animation-offset: @cmp-examples-spacing-3;
@cmp-examples-notification-bottom: @cmp-examples-notification-right - @cmp-examples-notification-animation-offset;

.cmp-examples-notification {
    position: fixed;
    bottom: @cmp-examples-notification-bottom;
    right: @cmp-examples-notification-right;
    z-index: @cmp-examples-z-index-notification;

    display: flex;
    align-items: center;
    max-width: 290*@px;
    border-radius: @cmp-examples-border-radius;
    padding: @cmp-examples-spacing-3 @cmp-examples-spacing-5;
    line-height: @cmp-examples-line-height;

    font-size: @cmp-examples-font-size-s;
    font-weight: @cmp-examples-font-weight-regular;
    color: @cmp-examples-color-white;
    background-color: @cmp-examples-color-notice;
    white-space: nowrap;

    animation: ~'cmp-examples-notification-in linear @{cmp-examples-animation-duration-4}';
    animation-iteration-count: 1;

    .user-select(none);
}

.cmp-examples-notification__text {
    margin-left: @cmp-examples-spacing-4;

    overflow: hidden;
    text-overflow: ellipsis;
}

.cmp-examples-notification--out {
    animation: ~'cmp-examples-notification-out linear @{cmp-examples-animation-duration-4}';
    animation-iteration-count: 1;
}

.cmp-examples-notification--success {
    background-color: @cmp-examples-color-success;
}

.cmp-examples-notification--error {
    background-color: @cmp-examples-color-error;
}

.cmp-examples-notification--warning {
    background-color: @cmp-examples-color-warning;
}

@keyframes cmp-examples-notification-in {
    0% {
        opacity: 0;
        .transform(~'translate(0, @{cmp-examples-notification-animation-offset})');
    }
    100% {
        opacity: 1;
        .transform(translate(0, 0));
    }
}

@keyframes cmp-examples-notification-out {
    0% {
        opacity: 1;
        .transform(translate(0, 0));
    }
    100% {
        opacity: 0;
        .transform(~'translate(0, @{cmp-examples-notification-animation-offset})');
    }
}
