@import "~scss/_mixins";

.viewGallery {
	.body { padding: 4px 16px; position: relative; }

	.items { height: 100%; display: flex; flex-direction: column; }
	.items {
		.row { display: grid; grid-gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 0px; }

		.item { flex-shrink: 0; flex-grow: 0; background-color: var(--color-bg-primary); }
		.item {
			.dropTarget { height: 100%; border-radius: 8px; }
			.inner { display: flex; flex-direction: column; height: 100%; align-items: stretch; }

			.cover { 
				position: relative; height: 80px; background-position: top center; display: flex; align-items: center; flex-shrink: 0;
				background-color: var(--color-shape-highlight-medium); width: 100%; justify-content: center; border-radius: 8px 8px 0px 0px; overflow: hidden;
			}

			.cover {
				img { width: 100%; height: 100%; object-fit: cover; }

				.mediaVideo { height: 100%; }
				.mediaVideo {
					video { width: 100%; height: 100%; object-fit: cover; }
					.controls {
						.icon.play { width: 32px; height: 32px; margin: -16px 0px 0px -16px; background-size: 12px 14px; background-position: 12px center; }
					}
				}

				.mediaAudio { padding: 8px 16px; }
			}

			.info { padding: 12px; border: 1px solid var(--color-shape-primary); border-radius: 8px; position: relative; flex-grow: 1; }
			.info {
				.iconObject { vertical-align: middle; position: absolute; top: 12px; left: 12px; }
				.name { @include text-small; @include clamp2; max-height: 36px; }
			}
		}

		.item.withIcon {
			.info {
				.name { text-indent: 22px; }
			}
		}

		.item.withCover {
			.info { border-top: 0px; border-radius: 0px 0px 8px 8px; padding: 8px 12px 16px 12px; }
			.info {
				.iconObject { top: 8px; }
			}
		}

		.item.withoutName {
			.cover { border-radius: 8px; }
		}

		.item:hover, .item.active { background: var(--color-shape-highlight-light); }
	}
}