@import "~scss/_mixins";

.blocks {
	.block.blockDataview {
		.viewContent.viewCalendar { position: relative; height: 100%; padding: 0px; }
		.viewContent.viewCalendar {
			.table { display: flex; flex-flow: column; height: 100%; }
			.table {
				> .head, > .body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
				> .head { flex-shrink: 0; padding-right: 6px; }
				> .head {
					.item { 
						@include text-small; padding: 2px 10px; border-color: var(--color-shape-secondary); border-style: solid;
						border-right-width: 1px; border-bottom-width: 1px; text-align: right;
					}
				}

				> .body { overflow: scroll; border-color: var(--color-shape-secondary); border-style: solid; border-bottom-width: 1px;  }
			}

			.day { 
				text-align: left; vertical-align: top; border-color: var(--color-shape-secondary); border-style: solid; display: flex; flex-direction: column;
				border-right-width: 1px; border-top-width: 1px; padding: 6px 4px; position: relative; height: 136px;
			}
			.day.first { border-top-width: 0px; }

			.day.active {
				.head {
					.number { padding: 0px; color: var(--color-text-inversion); }
					.number {
						.inner { 
							background-color: var(--color-system-accent-100); border-radius: 12px; padding: 0px 8px; align-self: flex-end; min-width: 24px; text-align: center; 
							transition: $transitionAllCommon;
						}
					}
				}
			}

			.day.other {
				.number { color: var(--color-text-tertiary); }
			}

			.day {
				.head { display: flex; flex-direction: row; gap: 0px 8px; align-items: center; justify-content: space-between; }
				.head {
					.icon { flex-shrink: 0; width: 24px !important; height: 24px !important; opacity: 0; transition: opacity $transitionCommon; }

					.number { @include text-paragraph; text-align: right; width: 100%; }
					.number {
						.inner { display: inline-block; }
					}
				}

				.item { 
					display: flex; flex-direction: row; align-items: center; gap: 0px 4px; @include text-small; @include text-overflow-nw; 
					margin: 0px 0px 2px 0px; position: relative; padding: 0px 8px; border-radius: 4px;
				}
				.item {
					.iconObject { flex-shrink: 0; }
					.name { @include text-overflow-nw; }
				}
				.item::before {
					content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1;
					pointer-events: none;
				}
				.item:hover::before { background: var(--color-shape-highlight-medium); }

				.item.more { display: block; color: var(--color-text-secondary); }
			}

			.day:hover {
				.head {
					.icon { opacity: 1; }
				}
			}
        }
    }

	.block.blockDataview.isInline {
		.viewContent.viewCalendar {
			.table { border-left-width: 1px; border-bottom-width: 0px; }
		}
	}
}