@import "~scss/_mixins";

.blocks {
	.block.blockDataview {
		.viewContent.viewCalendar { position: relative; padding: 0px; }
		.viewContent.viewCalendar {
			.table { display: flex; flex-flow: column; }
			.table {
				> .head, > .body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
				> .head { flex-shrink: 0; }
				> .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 { 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.weekend:not(.active) { background-color: var(--color-shape-highlight-light); }

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

			.dropTarget { width: 100%; height: 100%; }
			.dropTarget.targetBot { width: calc(100% - 8px); margin: 0px auto 0px auto; }

			.head { display: flex; flex-direction: row; 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; }
				}
			}

			.items { flex-grow: 1; }

			.record { 
				display: flex; flex-direction: row; align-items: center; gap: 0px 4px; @include text-small; margin: 0px 0px 2px 0px; 
				position: relative; padding: 0px 4px; border-radius: 4px;
			}
			.record {
				.dropTarget { display: flex; flex-direction: row; align-items: center; gap: 0px 4px; }

				.iconObject { flex-shrink: 0; }
				.name { @include text-overflow-nw; width: 100%; }
			}
			.record::before {
				content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1;
				pointer-events: none;
			}
			.record:hover::before { background: var(--color-shape-highlight-medium); }

			.record.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; }
		}
	}
}