/*
 * 
 *   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';

.CatalogPackageManager {
	overflow: hidden;
	> .items {
		margin: 4px;
		border: 1px solid transparent;
		padding: 4px;
		white-space: nowrap;
		overflow: auto;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-ms-overflow-style: none;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
		justify-content: flex-start;

		> .item {
			overflow: hidden;
			position: relative;
			font-size: 12px;
			font-weight: 200;
			font-style: normal;
			height: 40px;
			width: 100%;
			max-width: 400px;
			margin: 5px;
			border-radius: 5px;
			padding: 4px 8px;
			color: #3a3a3a;
			background-color: #ffffff;

			&.-error {
				background-color: rgba(139, 0, 0, 0.1);
			}
			&.-success {
				background-color: rgba(0, 139, 0, 0.1);
			}

			h2 {
				font-size:12px;
				font-weight: 400;
				padding-top: 0;
				padding-bottom: 0;
				padding-left: 30px;
			}
			img {
				width: 25px;
				height: 25px;
				position: absolute;
				top: 4px;
				left: 5px;
			}
			.message {
				padding-left: 30px;
			}
			span {
				display: inline-block;
			}
			em {
				display: none;
				color: #3C0808;
				font-weight: 100;
				margin-right: 4px;
			}
			var {
				font-family: monospace, serif;
			}
			.file-progress {
				display: block;
			}
			.file-progress-indicator {
				position: absolute;
				left: 30px;
				right: 3px;
				bottom: 0;
				margin: 3px;
				border: 1px solid rgba(81, 102, 147, 0.87);
				border-radius: 3px;
				padding: 0;
				height: 3px;
				background-color: white;
			}
			.file-progress-indicator-value {
				height: 1px;
				border-radius: 3px;
				background-color: #64F106;
			}
			.file-download {
			}
			.file-download-link {
				display: inline;
				margin-left: 24px;
				padding: 3px;
			}
			.file-preview {
				display: block;
				em {
					display: none;
				}
			}
			.file-error {
				display: block;
				position: absolute;
				z-index: 99;
				background-color: black;
				top: 18px;
				left: 30px;
				right: 10px;
				border-radius: 3px;
				padding: 1px 4px !important;
			}
			.file-success {
				display: block;
				position: absolute;
				z-index: 99;
				background-color: black;
				top: 18px;
				left: 30px;
				right: 10px;
				border-radius: 3px;
				padding: 1px 4px !important;
			}
			.item-actions {
				background-color: rgba(255,255,255,.5);
				display: none;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				padding: 4px;
				text-align: right;
				.Button {
					&:hover {
						background-color: transparent;
						border-color: transparent;
					}
				}
			}
			&:hover .item-actions {
				display: block;
			}
		}
	}
}