/*
*
* @copyright Copyright (c) Open-Xchange GmbH, Germany <info@open-xchange.com>
* @license AGPL-3.0
*
* This code is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.

* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.

* You should have received a copy of the GNU Affero General Public License
* along with OX App Suite. If not, see <https://www.gnu.org/licenses/agpl-3.0.txt>.
*
* Any use of the work other than as authorized under this license or copyright law is prohibited.
*
*/

.io-ox-core-tk-attachment-list {
    padding: 0;

    /* SimpleEditableList */
    .item {

        position: relative;
        line-height: 1.5em;
        margin-bottom: 2px;
        padding: 4px 2.5em 4px 5px;
        background-color: white;

        /* depending on pane background*/
        &.background { background-color: #f5f5f5; }

        &.pointer { cursor: pointer; }

        div.dropdown { overflow: visible; }

        div { .ellipsis(); }

        > i {
            position: absolute;
            font-size: 20px;
            top: 12px;
            left: 11px;
        }

        .control, .remove {
            display: inline-block;
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
            width: 2em;
            line-height: 1em;
            cursor: pointer;

            &.remove {
                background-color: #f5f5f5;
                color: #aaa;
            }

            &.dropdown { margin: 0; }

            .fa {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                margin-top: -0.5em;
                text-align: center;
            }
        }

        .remove:hover {
            background-color: #a00;
            color: #fff;
            text-decoration: none;
        }

        .group-label {
            display: block;
            font-style: italic;
            margin-right: 1em;
        }

        &.signature-remove a { color: #800; }

        .signature-preview {
            font-style: italic;
            color: #888;
            white-space: normal;
        }

        &.upload {
            background-color: #f5f5f5;
            padding-right: 5px;
        }

        &.file {
            position: relative;
            height: 3em;
            line-height: 1.5em;
        }

        .filesize { color: #aaa; }

        .row-1 {
            position: absolute;
            left: 40px;
            right: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .row-2 {
            position: absolute;
            left: 40px;
            right: 30px;
            top: 23px;
        }

    }

    .col-md-6:nth-child(odd) { margin-left: 0; }

    /* EditableAttachmentList */
    .io-ox-core-tk-attachment {
        position: relative;
        height: 3em;
        line-height: 1.5em;
        margin-bottom: 2px;
        padding: 4px 2.5em 4px 5px;
        background-color: #f5f5f5;

        > i, .remove i {
            position: absolute;
            font-size: 20px;
            top: 12px;
            left: 11px;
        }

        > div {
            position: absolute;
            left: 40px;
            right: 30px;
            .ellipsis();

            &.row-2 { top: 23px; }
        }

        .remove {

            display: inline-block;
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
            width: 2em;
            line-height: 1em;
            background-color: #f5f5f5;
            color: #aaa;
            cursor: pointer;

            &:hover {
                background-color: #a00;
                color: #fff;
                text-decoration: none;
            }

            i {
                top: 50%;
                left: 0;
                right: 0;
                margin-top: -0.5em;
                text-align: center;
            }

        }

    }
}