/**
 * Roundcube webmail styles for the Elastic skin
 *
 * Copyright (c) 2017, The Roundcube Dev Team
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
 * License. It is allowed to copy, distribute, transmit and to adapt the work
 * by keeping credits to the original authors in the README.md file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 */

/*** UI Messages ***/

#messagestack {
    position: absolute;
    bottom: .5em;
    right: .5em;
    z-index: 99;
    width: 320px;
    height: auto;
    max-height: 85%;
    overflow-y: auto;

    @media screen and (max-width: @screen-width-xs) {
        left: .5em;
        width: auto;
    }

    div {
        &.voice {
            position: absolute;
            top: -1000px;
        }

        i.icon {
            font-size: 2em !important;
        }

        a:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

/*
    .boxwarning and .boxerror classes are supported by conversion
    to .ui.alert in bootstrap_init()
*/

.ui.alert {
    margin: 0;
    margin-bottom: .2em;
    opacity: .95;
    float: left;
    width: 100%;
    padding: .75em;

    & > i.icon {
        line-height: 1;
    }

    & > i.icon:before {
        &:extend(.font-icon-class);
        content: @fa-var-info-circle;
    }

    &.loading > i.icon:before {
        content: @fa-var-circle-o-notch;
        .animated-icon-class;
    }

    &.alert-warning > i.icon:before {
        content: @fa-var-warning;
    }

    &.alert-danger > i.icon:before {
        content: @fa-var-exclamation-circle;
    }

    &.vcardattachment > i.icon:before {
        content: @fa-var-vcard; /* vcard_attachments plugin */
    }

    /* This works with following structure: <i> <span> [button].
       <span> here is a one-line text, and button can be anything but <span>.
     */
    &.aligned-buttons {
        display: flex;

        span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 2.6;
        }
    }
}