/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   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.
 *
 */
@import 'variables';
@import "ColorGroups";

%type-header {
    height:0.8rem;
    width:100%;
    color:white;
    font-size:0.6rem;
    padding-left: 1.5rem;
    text-transform:uppercase;
        line-height: 0.9rem;
}

.CatalogItems {
	padding:0;
	margin: 0;
	position: absolute;
	margin-top: 40px;
	overflow-y: auto;
	top: -6px;
	right: 0;
	bottom: 0;
	left: 0;
	.nsd {
		.type-header {
			@extend %type-header;
			background:$nsd-primary-color;
		}
	}
	.vnfd {
		.type-header {
			@extend %type-header;
			background:$vnfd-primary-color;
		}
	}
	ul {
		list-style: none;
		margin: 0;
		border: 0;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
	li {
		position: relative;
		width: 100%;
		min-width: 280px;
		max-width: 400px;
		margin: 1px;
		border: 5px;
		padding: 4px 8px;
	}
	li > div {
		&.-is-open-for-edit-indicator {
			position: absolute;
			top: 10px;
			left: -4px;
			bottom: 10px;
			width: 8px;
			border-radius: 2px;
			background-color: #4d8fb3;
		}

	}
	div.catalog-item {
		cursor: pointer;
		display: block;
		overflow: hidden;
		position: relative;
		width: 100%;
		height:auto;
		min-height: 70px;
		margin: 0;
		padding: 0;
		border-radius: 5px;
		border: 1px solid #e5e5e5;
		font-size: 14px;
		font-weight: 400;
		font-style: normal;
		background-color: #ffffff;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		&:hover {
			background-color: #7E9BC1;
			dl {
				dd {
					color: #ffffff;
				}
			}
		}
		&:active, &:visited {
			background-color:#4C5E74;
		}
		&.-is-modified {

		}
		&.-is-deleted {
			display: none;
		}

		.-is-modified-indicator {
			position: absolute;
			top: -20px;
			right: -20px;
			width: 40px;
			height: 40px;
			background-color: #FF5F5F;
			transform: rotate(-45deg);
		}

		dl {
			margin: 0;
			padding: 3px 0 0 80px;
			position: relative;
			min-height: 70px;
			dt {
				margin: 0;
				padding: 0;
				font-size: 14px;
				font-weight: 400;
				white-space: nowrap;
			}
			dd {
				display: block;
				padding:0;
				color:#aeaeae;
				font-size: 10px;
				font-style: normal;
			}
			dd.logo {
				position: absolute;
				top:0;
				left: 5px;
				bottom: -4px;
				width: 70px;
				margin: 0;
				border: 0;
				padding: 0;
				overflow: hidden;
				img.logo {
					margin: 0;
					border: 0;
					padding: 0;
					width: 50px;
					/*height: 50px; logos must scale height to fit a 50x50 pixel box otherwise they will clip*/
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		&:first-of-type {
			margin-top: 0;
		}

		span.vendor,
		span.version {
			display: inline-block;
			padding-right: 4px;
		}
		span.vendor:after {
			content: ' /';
		}
		span.version:before {
			content: ' v';
		}
		span.description {
			display: none;
		}
	}
}