/*
*
* @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.
*
*/

.settings-list-view > li {

    display: flex;
    flex-wrap: wrap;

    align-items: center;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 3px;

    & > * {
        flex: 0 0 auto;
        padding: 16px;
    }

    &:focus {
        outline: 2px solid @outline-color;
    }

    .list-item-title {
        flex: 1;
        .ellipsis();
    }
    .list-item-subtitle {
        color: #767676;
        .ellipsis();

        label {
            margin-right: 10px;
        }
    }

    // support ellipsis for sub nodes
    .list-item-subtitle {
        display: flex;
        .deeplink > { .ellipsis(); }
    }

    .drag-handle {
        width: 45px;
        position: relative;

        i {
            height: 9px;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -5px 0 0 -6px;
            color: #aaa;
        }

        &:focus {
            outline: 2px solid @outline-color;
            text-decoration: underline;
        }

        &.selected {
            background-color: #ddd;
        }
    }

    .list-item-controls {
        padding: 0;

        & > * {
            margin: 13px 14px;
            display: inline-block;
        }

        .dropdown-toggle, .action {
            padding: 13px 16px;
            margin:0;

            &:focus {
                outline: 2px solid @outline-color;
                text-decoration: underline;
            }
        }

        .remove, .toggle {

            padding: 13px 16px;
            margin: 0;
            margin-left: 10px;

            &:hover, &:focus {
                text-decoration: none;
                background-color: #c00;

                i { color: #fff; }
            }
            &:focus {
                outline: 2px solid @outline-color;
            }

            i { color: #aaa; }
        }
        .toggle {
            padding: 13px 14px;
            &:hover, &:focus { background-color: @link-color }
        }

    }

    &.default {
        .list-item-title {
            font-weight: bold;
        }
    }

    &.disabled {
        background-color: #F3F3F3;

        .list-item-title {
            font-style: italic;
            font-weight: normal;
            color: #696969;
        }
    }

    .error-wrapper {
        color: #333;
        flex: 100%;
        display: flex;
        align-items: center;
        padding: 0 0 13px 0;

        .error-message, .message {
            padding-left: 16px;
            margin-right: 2em;
        }

        .error-icon, .icon {
            text-align: center;
            width: 2.5rem;
            padding: 3px 13px;
            margin-left: 6px;
        }
    }

    .warning-message {
        color: #888;
        margin-right: 2em;
    }

    @media (max-width: @smartphone-breakpoint), (max-device-width: @smartphone-breakpoint) {
        .list-item-controls {
            .remove, .toggle {
                margin-left: 0;
            }
        }
    }

    @media (min-width: 1000px) {
        .list-item-controls {
            & > * {
                margin: 13px 25px;
            }
        }
    }
}