@import "~scss/_mixins";

.menus {
	.menu.menuCalendar { width: var(--menu-width-value); }
	.menu.menuCalendar {
		.titleWrapper { padding: 8px 16px 0px; }
		.content { padding: 10px 0px; overflow: visible; max-height: unset; }
		.inner { user-select: none; }

		.head { padding: 0px 16px; }
		.head, .foot {
			.sides { display: flex; }
			.side { width: 50%; }
			.side.right { text-align: right; }
		}
		.head {
			.date { color: var(--color-control-active); margin-bottom: 6px; }
			.sides { margin-bottom: 10px; }
			.side.right { display: flex; gap: 0px 2px; justify-content: flex-end; }
			.side.right {
				.btn { 
					width: 24px; height: 24px; background-size: 20px; background-image: url('~img/arrow/calendarNav.svg'); background-position: 50% 50%; 
					border-radius: 4px; 
				}
				.btn:hover { background-color: var(--color-shape-highlight-medium); }
				.btn.prevMonth { transform: rotateZ(180deg); }
			}

			.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; grid-gap: 8px; align-items: center; }
		}

		.body { padding: 0px 16px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; grid-gap: 8px; }
		.foot { padding: 0px 16px; }
		.foot {
			.btn { display: inline-block; vertical-align: top; margin-right: 16px; transition: $transitionAllCommon; }
			.btn.clear { color: var(--color-text-secondary); }
			.btn:last-child { margin: 0px; }
			.btn:hover { color: var(--color-system-accent-100); }
		}

		.day { 
			display: flex; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 4px; align-items: center; justify-content: center; 
			position: relative;
		}

		.day.th { color: var(--color-control-active); @include text-small; }

		.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.today, .day.active { font-weight: 600; }
		.day.today { color: var(--color-system-accent-125); }
		.day.other { color: var(--color-control-active); }
		.day.active { background: var(--color-system-accent-100); color: var(--color-text-inversion); }
		.day.active {
			.bullet { background-color: var(--color-text-inversion); }
		}

		.day.selected::before { 
			content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-radius: inherit; background-color: var(--color-shape-highlight-medium); 
		}
		
		.line { margin: 8px 16px 11px 16px; }
		
		.input { 
			height: 28px; border-radius: 4px; border: solid 1px var(--color-shape-primary); margin-bottom: 10px; padding: 0px 10px;
			background: none; width: 100px; vertical-align: top;
		}

		.select { border: 0px; height: 24px; vertical-align: top; @include text-paragraph; padding: 2px 4px; }
		.select {
			.icon.arrow { display: none; }
		}
	}

	.menu.menuCalendarDay {
		.content { max-height: unset; overflow: visible; }

		.wrap { display: flex; flex-direction: column; }
		.wrap {
			.number { @include text-paragraph; flex-shrink: 0; }
			.number {
				.inner { display: inline-block; }
			}
		}
		.wrap.active {
			.number { padding: 0px; color: var(--color-text-inversion); }
			.number {
				.inner { 
					background-color: var(--color-system-accent-100); border-radius: 12px; padding: 0px 7px; align-self: flex-end; min-width: 24px; 
					text-align: center;;
				}
			}
		}
		.wrap.other {
			.number { color: var(--color-text-secondary); }
		}

		.items { overflow-y: auto; flex-grow: 1; max-height: 250px; }
		.items {
			.item { display: flex; flex-direction: row; align-items: center; @include text-overflow-nw; }
			.item {
				.iconObject, .icon { flex-shrink: 0; margin: 0px; }
				.name { @include text-overflow-nw; }
			}
			.item.add { color: var(--color-text-secondary); }
		}
	}

	.menu.menuCalendarDay.fromBlock {
		.content { padding: 8px 4px 0px 4px; }
		
		.wrap {
			.number { text-align: right; padding: 0px 8px; }
		}

		.items { height: calc(100% - 24px); padding: 4px 0px; }
		.items {
			.item { gap: 0px 4px; margin: 0px 0px 2px 0px; padding: 0px 8px; border-radius: 4px; }
			.item {
				.name { @include text-small; }
			}
		}
	}

	.menu.menuCalendarDay.fromWidget { width: var(--menu-width-value); }
	.menu.menuCalendarDay.fromWidget {
		.content { padding: 12px 0px 8px 0px; }

		.wrap {
			.number { text-align: left; margin: 0px 0px 8px 0px; font-weight: 600; padding: 0px 14px; }
		}

		.items {
			.item { gap: 0px 6px; }
		}
	}
}
