.flying-alerts {
    position: fixed;
    z-index: @zindex-flying-alerts;
    list-style-type: none;
    padding: 0;
    margin: 0;

    // position
    // like this, the gape for top bar still appear in fullscreen mode
    // TODO : find a way to remove it
    top: floor(@grid-gutter-width / 2) + @top-bar-height;
    right: @grid-gutter-width;
}

.flying-alert {
    opacity: @flying-alert-opacity;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: @flying-alert-width;
    padding: @flying-alert-padding;
    margin-bottom: @flying-alert-margin-bottom;

    .border(1px solid transparent);
    .border-radius(@flying-alert-border-radius);
    .box-shadow(@flying-alert-box-shadow);

    .flying-alert-icon {
        position: relative;
        font-size: @flying-alert-icon-size;
        opacity: .5;
    }

    // todo : use .fa-composite
    .flying-alert-icon-secondary {
        position: absolute;
        right: 0;
        top: 50%;
        font-size: 14px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        border: 2px solid transparent;
    }

    .flying-alert-title {
        display: block;
        font-family: @headings-font-family;
        font-size: 16px;
        font-style: normal;
        font-weight: bold;
    }

    .flying-alert-message {
        flex: 1;
        font-size: @font-size-small;
        font-style: italic;
        padding-left: @flying-alert-padding;
    }

    .flying-alert-detail {

    }

    &.removable {
        cursor: pointer;
    }

    &:hover {
        opacity: 1;
        box-shadow: 0 0 5px 1px rgba(0,0,0,.5);
    }

    // variants
    &.flying-alert-success {
        .flying-alert-variant(@flying-alert-success-color, @flying-alert-success-bg, @flying-alert-success-border);
    }
    &.flying-alert-warning,
    &.flying-alert-unauthorized,
    &.flying-alert-forbidden {
        .flying-alert-variant(@flying-alert-warning-color, @flying-alert-warning-bg, @flying-alert-warning-border);
    }
    &.flying-alert-error {
        .flying-alert-variant(@flying-alert-error-color, @flying-alert-error-bg, @flying-alert-error-border);
    }
    &.flying-alert-info {
        .flying-alert-variant(@flying-alert-info-color, @flying-alert-info-bg, @flying-alert-info-border);
    }
    &.flying-alert-pending {
        .flying-alert-variant(@flying-alert-pending-color, @flying-alert-pending-bg, @flying-alert-pending-border);

        &.flying-alert-save,
        &.flying-alert-create,
        &.flying-alert-update,
        &.flying-alert-send {
            .flying-alert-variant(@flying-alert-primary-color, @flying-alert-primary-bg, @flying-alert-primary-border);
        }
    }
}

// pulsating pending alert
.flying-alert-pending {
    animation-name: pulse_animation;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;

    // disabled animation on hover
    &:hover {
        animation: none !important;
    }
}

@keyframes pulse_animation {
    0% { opacity: 1; }
    100% { opacity: .25; }
}
