@import "~scss/_mixins";

.blocks {
	.block.blockDataview {

		.viewContent.viewGrid,
		.viewContent.viewList {
			.cell.add { color: var(--color-control-active); line-height: 20px; width: 100%; display: block; }
			.cell.add {
				.btn { display: inline-block; transition: $transitionAllCommon; }
				.btn:hover { color: var(--color-text-primary); }
				.btn:hover {
					.icon.plus { background-image: url('~img/icon/plus/menu1.svg'); }
				}

				.icon { vertical-align: top; margin: 0px 4px 0px 0px; }
				.name { vertical-align: top; display: inline-block; line-height: 20px; height: 20px; vertical-align: top; width: calc(100% - 24px); }
			}
		}

		.viewContent.viewGallery, 
		.viewContent.viewBoard {
			.card { white-space: normal; }
			.card {
				.cardContent > .inner { padding: 16px; }

				.cover { 
					position: relative; aspect-ratio: 16/9; background-position: top center; display: flex; align-items: center;
					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; pointer-events: none; }

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

					.mediaAudio { padding: 8px 16px; border: unset; }
					.mediaAudio {
						.controlsWrapper {
							.name { display: none; }

							.controls {				
								#volume { right: 16px; }
							}
						}
					}
				}
				.cover.canEdit {
					.inner { background: none; }
					.inner {  
						.icon.plus { width: 20px; height: 20px; background-image: url('~img/icon/plus/gallery-cover0.svg'); margin: -2px 6px 0px 0px; }
						.add { 
							width: 100%; height: 20px; line-height: 20px; text-align: center; position: absolute; left: 0px; top: 0px; 
							top: 50%; margin-top: -10px;
						}
					}
				}

				.cellContent { margin-bottom: 4px; @include text-small; color: var(--color-text-secondary); }
				.cellContent.canEdit { cursor: default; }
				.cellContent:empty, .cellContent.isEmpty { display: none; }
				.cellContent.last { margin: 0px; }
				.cellContent.c-description { color: var(--color-text-primary); }
				.cellContent {
					.more { vertical-align: top; height: 18px; }
				}

				.cellContent.isName { @include text-paragraph; color: var(--color-text-primary); display: flex; gap: 0px 6px; position: relative; }
				.cellContent.isName {
					.iconObject { position: absolute; left: 0px; top: 0px; margin: 0px; cursor: default; }

					.name, .emptyText { @include text-common; line-height: 20px; font-weight: 500; vertical-align: top; white-space: normal; @include clamp2; }
				}

				.cellContent.isName.withIcon {
					.name, .emptyText { text-indent: 24px; }
				}

				.cellContent.c-select { line-height: 18px; }
				.cellContent.c-select {
					.tagItem { margin-bottom: 0px; @include text-small; }
					.over { height: 18px; }
				}

				.cellContent.c-url, 
				.cellContent.c-phone, 
				.cellContent.c-email {
					.name { width: auto; max-width: 100%; }
				}

				.cellContent.c-object, 
				.cellContent.c-file {
					.over { display: flex; height: 20px; }
				}

				.cellContent.isEditing.isName {
					.iconObject { position: relative; }
					.input.name { text-indent: 0px; padding: 0px; height: unset; }
				}
			}
			.card::after { 
				content: ''; position: absolute; left: 0px; top: 0px; border-radius: inherit; width: 100%; height: 100%; 
				background: rgba(0,0,0,0.03); transition: $transitionAllCommon; pointer-events: none; opacity: 0; z-index: 1;
			}

			.card:hover::after { opacity: 1; }

			.card.withCover {
				.cardContent > .inner { padding-top: 12px; }
			}

			.card.coverFit {
				.cover { background-size: contain; background-position: center center; }
				.cover {
					img { width: auto; height: auto; max-height: 100%; max-width: 100%; object-fit: contain; }

					.mediaVideo {
						video { object-fit: contain; }
					}
				}
			}
		}
	}

	.block.blockDataview.isInline {
		.viewContent.viewGallery, 
		.viewContent.viewBoard {
			.cellContent.isName {
				.name { @include clamp2; }
			}
		}
	}
}