/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
.items-holder {
    @include clearfix;
    overflow-y: auto;
	.contents {
		top: 0;
	}
    .item {
        $d: $ueBrowseGridItemLg;
        $iconMargin: 40px;
        $iconD: ($d - ($iconMargin * 2)) * 0.85;
        box-sizing: border-box;
        float: left;
        height: $d;
        width: $d;
        margin-bottom: $interiorMarginSm;
        margin-right: $interiorMarginSm;
        position: relative;
        &.grid-item {
            $transTime: 200ms;
            @include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
            cursor: pointer;
            &:hover .item-main {
	            .item-type {
		            color: lighten($colorKey, 10%);
                    .l-icon-link {
                        color: $colorIconLink;
                    }
                }
	            .item-open {
                    opacity: 1;
	            }
            }
	        .abs.contents {
                $m: $interiorMarginLg;
		        top: $m; right: $m; bottom: $m; left: $m;
	        }
            .bar {
                &.top-bar {
                    bottom: auto;
	                color: $colorItemSubIcons;
                    height: $ueBrowseGridItemTopBarH;
                    line-height: $ueBrowseGridItemTopBarH;
                    text-align: right;
	                z-index: 5;
	                .left, .right {
		                width: auto;
		                .icon {
			                margin-left: $interiorMarginSm;
                            &.l-icon-link {
                                color: $colorIconLink;
                            }
		                }
	                }
                }
                &.bottom-bar {
                    top: auto;
                    line-height: 110%;
                }
            }
            .item-main {
	            $h: $ueBrowseGridItemLg;
	            $lh: $h * 0.8;
                line-height: $lh;
	            z-index: 1;
                .item-type,
                .t-item-icon {
                    transform: translateX(-50%) translateY(-55%);
                    position: absolute;
                    top: 50%; left: 50%;
                    font-size: $iconD * 0.95;
                    &.l-icon-link {
                        .t-item-icon-glyph {
                            &:after {
                                transform: scale(0.25);
                            }
                        }
                    }
                }
                .item-open {
                    @include trans-prop-nice("opacity", $transTime);
                    opacity: 0;
	                color: $colorItemOpenIcon;
                    font-size: 3em;
                    left: auto; width: 50px;
                    pointer-events: none;
                    text-align: right;
                }
            }
            .title {
	            @include txtShdw($shdwItemText);
                @include ellipsize();
                color: $colorItemFg;
            }
            .details {
                @include txtShdw($shdwItemText);
                @include ellipsize();
	            color: $colorItemFgDetails;
                font-size: 0.8em;
            }
	        &.selected {
		        $cfg: lighten($colorItemBgSelected, 35%);
		        $cfgh: lighten($cfg, 30%);
		        @include btnSubtle($bg: $colorItemBgSelected);
		        color: $cfg;
		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
		        .item-main .item-open { color: $cfg }
		        .title { color: $cfgh; }
		        &:hover {
			        .item-main .item-type { color: $cfgh !important; }
		        }
	        }
        }
    }
}

table.list-view {
    $s: 1.2em;
    width: 100%;
    th, td {
        cursor: pointer;
    }
    tr:hover td {
        background-color: $colorItemBg;
        color: $colorItemFg;
    }
    td {
        $p: $interiorMargin;
        @include ellipsize;
        color: $colorItemFg;
        font-size: 1em;
        line-height: $s;
        max-width: 0;
        padding-top: $p;
        padding-bottom: $p;
    }
    .t-item-icon {
        font-size: $s;
        margin-right: $interiorMargin;
    }
    .t-title-label {
        @include ellipsize; // Yep, need it here too as well as the <td>
    }
}