// ---------------------------------------------------------------------------- generic panel list items
.list-item {
    border: 1px solid @border-default-color;

    @vertical-gap: 8px;
    .vertical-spacing {
        margin-bottom: @vertical-gap;
    }

    .info-section {
        border-radius: 3px;
        border: 1px solid fadeout( @layout-border-color, 70% );
        padding: 4px;
    }

    @spacing-top     : 6px;
    @spacing-right   : 10px;
    @spacing-bottom  : 6px;
    @spacing-left    : 8px;
    .padded {
        padding: @spacing-top @spacing-right @spacing-bottom @spacing-left;
    }

    .warnings {
        &:not(:empty) {
            padding-top: 4px;
        }
        [class$=messagesmall] {
            margin: @spacing-top @spacing-right ( @spacing-bottom - 4 ) @spacing-left;
            font-size: 90%;
            &:first-child {
                margin-top: 0px;
            }
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }

    .help-text {
        font-weight: normal;
        color: #555;
    }

    .selector {
        float: left;
        // always initially hidden and zero width
        display: none;
        width: 32px;
        height: 32px;
        //HACK: neg. on the bottom due to padding-bottom in title-bar - very tweakish
        margin: 0px 0px -( @spacing-bottom ) 0px;
        padding: ( @spacing-top + 2 ) 0px 2px ( @spacing-left - 1 );
        font-size: 80%;
        color: @btn-default-color;
        cursor: pointer;
        vertical-align: middle;
    }
    .selector:hover {
        color: maroon;
    }

    .title-bar {
        cursor: pointer;
        outline: none;
        .padded;

        .title {
            display: inline;
            font-weight: bold;
            text-decoration: underline;
            word-wrap: break-word;
            word-break: break-all;
            line-height: 16px;
        }
//TODO: show keyboard/tab focus for keyboard users
        //&:focus {
        //    color: maroon;
        //}
        .subtitle {
            color: #777;
            font-size: 90%;
            a {
                color: inherit;
            }
        }
    }

    .primary-actions {
        .icon-btn-group();
        float: right;
        margin: @spacing-top @spacing-right 0;
        .icon-btn {
            margin-left: @icon-btn-margin;
        }
    }

    .details {
        display: none;
        padding: 0px @spacing-right @spacing-bottom @spacing-left;

        & > [class$=messagesmall] {
            margin: 0px 0px 8px 0px;
        }

        label {
            margin: 0px;
            padding: 0px;
            font-weight: normal;
        }
        .prompt {
            .help-text;
        }
        .prompt:after {
            content: ':';
            margin-right: 4px;
        }
    }
}

// ---------------------------------------------------------------------------- generic panel list (of list-items)
.list-panel {

    //TODO: duplicated
    @vertical-gap: 8px;
    .vertical-spacing {
        margin-bottom: @vertical-gap;
    }

    .controls {
        & > *:not(:empty) {
            //background: rgba( 0, 255, 0, 0.2 );
            margin-bottom: 8px;
        }
        .name {
            word-wrap: break-word;
            font-weight: bold;
        }
        .subtitle {
            color: #777;
            font-size: 90%;
            a {
                color: inherit;
            }
        }
        .actions {
            .icon-btn-group();
            float: right;
            .icon-btn {
                margin-left: @icon-btn-margin;
            }
        }
        .messages {
            .clearfix();
            [class$=message],
            [class$=messagesmall] {
                margin: 0px;
                &:not(:last-child) {
                    margin-bottom: 8px;
                }
            }
        }
        .list-actions {
            display: none;
            .clear;
            .btn {
                padding-top: 2px;
                padding-bottom: 2px;
                font-size: 90%;
            }
            .list-action-menu {
                float: right;
            }
        }
    }
    // display only a top border on all but the last
    .list-items {
        .list-item {
            &:not(:last-child) {
                border-bottom-width: 0px;
            }
        }
    }
    .empty-message {
        display: none;
        margin: 0px;
    }
}

// ---------------------------------------------------------------------------- a list panel nested inside a list-item
.list-item .details .list-panel {
    margin-top: 8px;
    border-radius: 3px;
    background: white;
    padding: 4px;
    .list-items {
        border: 1px solid @border-default-color;
        border-radius: 3px;
        .list-item {
            &:first-child {
                border-top-width: 0px;
                border-radius: 3px 3px 0px 0px;
            }
            &:last-child {
                border-bottom-width: 0px;
                border-radius: 0px 0px 3px 3px;
            }
        }
    }
}