@import "var";

.assets {
	.wrapper {
		display: flex;
		flex: 1;
		flex-direction: column;

		.header-bar {
			padding: 1px;
			border-bottom: 1px solid $--pane-border-color;

			a {
				padding: 0 5px;
			}

			a:not(:first-child) {
				border-left: 2px solid $--pane-border-color;
			}
		}

		.container{
			display: flex;
			flex: 1;
			height: 0;

			.properties{
				width: 30%;
				padding: 3px;
				font-size: 12px;
				line-height: 14px;
				color: $--color-text-primary;
				border-left: 1px solid $--border-color-base;

				.item{
					border-bottom: 1px solid $--border-color-base;
				}

				p{
					word-break: break-all;
					margin: 0;
				}

				.name{
					font-size: 16px;
					line-height: 22px;
					width: 100%;
				}
				.ext{
					color: $--color-text-regular;
				}

			}

			.assets-scrollbar {
				flex: 1;
			}

		}

		.scrollbar-view{
			padding-bottom: 5px;
		}
	}
}


.file-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	.file-item {
		position: relative;
		width: 60px;
		padding: 5px;
		color: $--color-text-regular;

		&:hover {
			& > .icon > .operate-bar {
				visibility: visible;
			}
		}

		&.select{
			& > .name > .full-name {
				visibility: visible;
			}
		}

		.icon {
			width: 100%;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.thumbnail {
				max-width: 60px;
				max-height: 60px;
			}

			.file-icon {
				font-size: 60px;
			}

			.operate-bar {
				visibility: hidden;
				position: absolute;
				right: 1px;
				bottom: 1px;
				display: flex;

				.delete-button{
					margin-left: 2px;
				}
			}
		}

		.name {
			text-align: center;
			font-size: 12px;
			position: relative;
			margin-top: 2px;

			span {
				word-break: break-all;
				overflow:hidden;
				text-overflow: ellipsis;
				display:-webkit-box;
				-webkit-line-clamp:2;
				-webkit-box-orient:vertical;
			}

			.full-name {
				visibility: hidden;
				position: absolute;
				top: 0;
				left: 0;
				background-color: $--color-text-secondary;
				color: $--color-white;
				border-radius: 5px;
				padding: 2px;
				z-index: 2;
				width: 95%;
				line-height: 17px;
			}
		}

		.dep-flag{
			position: absolute;
			left: 0;
			top: 0;

			width: 0;
			height: 0;
			border-top: 10px solid black;
			border-right: 10px solid transparent;
			border-top-color: $--color-primary;

			&.explicit{
				border-top-color: $--color-danger;
			}
			&.implicit{
				border-top-color: $--color-success;
			}
		}
	}

	.file-uploader {
		width: 60px;
		height: 60px;
		margin: 4px;
		border: 1px dashed $--color-text-secondary;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		.file-uploader-icon {
			font-size: 28px;
			color: $--color-text-regular;
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;
		}
	}
}

.assets-show {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;

	.wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px;

		.close-button {
			align-self: flex-end;
		}

		.name-bar {
			margin-top: 5px;
			color: $--color-white;
			align-self: stretch;

			.item + .item{
				margin-top: 5px;
			}

			.item{
				padding: 3px 0;
				.field{
					width: 30px;
					display: block;
				}
			}
		}

		.big-image {
			flex: 1;
			display: flex;
			padding: 5px;

			img {
				flex-shrink: 1;
			}
		}

		.image-info{
			color: $__color-white;
			font-size: 12px;
		}

		.operate-bar {

		}
	}
}
