@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,
		.viewContent.viewList {
			.icon.editMode { display: none; background-image: url('~img/icon/dataview/button/edit0.svg'); background-position: 50% 50%; background-repeat: no-repeat; }
			.icon.editMode:hover { background: url('~img/icon/dataview/button/edit1.svg') 50% 50% no-repeat; }
			.icon.editMode.enabled { display: none !important; }
		}

		.viewContent.viewGallery,
		.viewContent.viewBoard {
			.card { white-space: normal; }
			.card {
				.cardContent > .inner { padding: 16px; display: flex; flex-direction: column; align-items: flex-start; }
				.cardContent > .inner {
					.cellContent:not(.isName) { width: unset; max-width: 100%; height: 24px; padding-top: 3px; padding-left: 4px; padding-right: 4px; margin-left: -4px; border-radius: 6px; }
					.cellContent:not(.isName) {
						.empty { @include text-overflow-nw; width: 100%; }
					}
					.cellContent:not(.isName):hover,
					.cellContent:not(.isName).hover { background-color: var(--color-shape-highlight-medium); }
					.cellContent.c-longText { height: unset; min-height: 24px; }
				}

				.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: 1px; @include text-small; color: var(--color-text-secondary); }
				.cellContent.canEdit { cursor: default; }
				.cellContent:empty,
				.cellContent.isEmpty:not(.editModeOn, .withMenu) { 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 {
					.name, .emptyText { @include text-common; line-height: 20px; font-weight: 500; vertical-align: top; white-space: normal; @include clamp2; }
				}

				.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 { align-items: flex-start; }
				.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: 8px; 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; }
					}
				}
			}

			.icon.editMode { position: absolute; z-index: 3; width: 28px; height: 28px; right: 8px; top: 8px; border-radius: 4px; background-color: var(--color-bg-primary); background-size: 20px; }
			.icon.editMode:hover { background-color: var(--color-bg-primary); }

			.card:hover {
				.icon.editMode { display: block; }
			}
		}
	}

	.block.blockDataview.isInline {
		.viewContent.viewGallery, 
		.viewContent.viewBoard {
			.cellContent.isName {
				.name { @include clamp2; }
			}
			.cellContent:not(.isName) {
				.name { @include text-overflow-nw; width: 100%; }
			}
		}
	}
}
