@import "~scss/_mixins";

.viewCalendar {
	.dateSelect { padding: 0px 12px; display: flex; flex-direction: row; margin: 4px 0px; justify-content: space-between; }
	.dateSelect {
		.side { gap: 0px 4px; display: flex; flex-direction: row; align-items: center; }
		.side.left { @include text-paragraph; font-weight: 600; }
		.side.right { justify-content: flex-end; }

		.select { padding: 2px 4px; border: 0px; }
		.select {
			.icon.arrow { display: none; }
		}

		.btn { padding: 2px 4px; line-height: 20px; transition: $transitionAllCommon; border-radius: 4px; }
		.btn:hover { background-color: var(--color-shape-highlight-medium); }

		.icon.arrow { 
			width: 24px; height: 24px; background-size: 20px; background-image: url('~img/arrow/dateSelect.svg'); border-radius: 4px; 
			transition: $transitionAllCommon; transform: rotateZ(90deg);
		}
		.icon.arrow.left { transform: rotateZ(270deg); }
		.icon.arrow:hover { background-color: var(--color-shape-highlight-medium); }
	}

	.table { display: flex; flex-flow: column; padding: 0px 16px; }
	.table {
		.tableHead, .tableBody { display: grid; grid-template-columns: repeat(7, 1fr); }
		.tableHead { flex-shrink: 0; height: 28px; }
		.tableHead {
			.item, .inner { display: flex; flex-direction: row; align-items: center; justify-content: center; }

			.item { @include text-small; color: var(--color-text-secondary); }
			.item {
				.inner { width: 100%; max-width: 28px; height: 28px; }
			}
		}
	}

	.day, .day .inner { display: flex; flex-direction: row; align-items: center; justify-content: center; }
	.day.today { color: var(--color-system-accent-125); font-weight: 500; }
	.day.other { color: var(--color-text-secondary); }
	.day.weekend { background-color: var(--color-shape-highlight-light); }

	.day {
		.inner { width: 100%; max-width: 28px; height: 28px; border-radius: 4px; transition: $transitionAllCommon; position: relative; }
		.bullet { width: 3px; height: 3px; border-radius: 50%; position: absolute; bottom: 2px; left: 50%; margin-left: -1.5px; background: var(--color-control-active); }
	}

	.day:hover, .day.active { 
		.inner { background-color: var(--color-shape-highlight-medium); }
	}
	.day:hover, .day.active {
		.bullet { background: var(--color-text-primary); }
	}
	.day.today { 
		.bullet { background: var(--color-system-accent-125); }
	}
	.day.other {
		.bullet { background: var(--color-text-secondary); }
	}
}