<commit_before>// Calendar Popup
.cui-layer-root-cui-date-time-popover .cui-layer > .cui-pane > .cui-vertical-layout-center {
	overflow: hidden; // override default, see: .cui-layer > .cui-pane > .cui-vertical-layout-center

	@include pane-padding-reset();

	margin: 0;
}

.cui-date-time-popover .cui-date-time-popover-inner {
	--calendar-background: #{$calendar-background};
	--calendar-static-cells-background: #{$calendar-static-cells-background};

	background-color: var(--calendar-background);
	flex: 1 1 auto;

	.cui-date-time-header {
		display: none; // todo: remove from markup?
	}

	&[browser='time'] {
		.cui-date-time-calendar {
			margin-left: -100%;
		}
	}

	.cui-date-time-browser {
		display: flex;
		// overflow: hidden; cuts off year-picker outline
		flex: 1 1 auto;

		.cui-date-time-calendar,
		.cui-date-time-clock {
			width: 100%;
		}

		.cui-date-time-calendar {
			transition: margin-left 0.5s ease-out;
		}
	}
}

.cui-date-time-clock {
	display: none; // todo: remove from markup?
}

// Calendar
// DateTime Format | Day:Month:Year | Hour:Minute |
.cui-date-time-calendar {
	font-size: $calendar-font-size;

	.cui-table {
		border: 0;
		margin-top: $spacer-sm;
	}

	.cui-buttonbar {
		padding: $spacer-sm;
		justify-content: space-between;
	}
	
	// Apply layer header styling
	> .cui-buttonbar {
		background: $layer-header-background;
		color: $layer-header-color;
		padding: $spacer $spacer-sm;
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'd_title t_title'
			'date time';

		@include ungroup-visually-inverted();

		.cui-button-select {
			@include button-inverted();
			@include button-sm();
		}

		.cui-select-date-title,
		.cui-select-time-title {
			@include layer-title();
	
			margin-bottom: $spacer-sm;
			margin-left: $spacer-sm;
		}
	
		.cui-select-date-title {
			grid-area: d_title;
		}
	
		.cui-select-time-title {
			grid-area: t_title;
		}
	
		.cui-buttonbar-group-date {
			grid-area: date;
		}
	
		.cui-buttonbar-group-time {
			grid-area: time;
		}
	}

	.cui-buttonbar-group-date,
	.cui-buttonbar-group-time {
		.cui-data-field-input > .cui-button-select {
			width: auto;
		}
	}

	.cui-buttonbar-group-time {
		.cui-select:not(.cui-date-time-am-pm-select):not(:first-child)::before {
			content: ':';
			position: relative;
			top: 1px;
			color: theme-color('muted');
		}
	}

	.cui-select {
		.cui-button-center {
			min-width: 32px;

			span:empty::after {
				content: '\2013\2013';
				color: theme-color('muted');
				letter-spacing: 0.1em;
			}
		}

		&.cui-date-time-am-pm-select .cui-button-center {
			min-width: 38px;
			margin-left: -5px;

			span:empty::after {
				content: 'am';
				display: block;
				position: relative;
				top: -1px;
				color: theme-color('muted');
				font-size: 10px;
			}
		}
	}
}

.cui-date-time-footer {
	overflow: visible !important; // show year input outline
	margin-bottom: $spacer-xs;

	.cui-buttonbar > *:not(:last-child) {
		margin-right: 0;
	}
		
	.cui-date-time-header-month,
	.cui-date-time-header-year .cui-buttonbar-group {
		@include ungroup-visually();
		@include buttonbar-group-navigation();
	}

	[cui-data-field-name='year'] input {
		$year-padding: $spacer-xs;

		width: calc(4ch + 4 * #{$year-padding});
		min-width: 0;
		text-align: center;
		position: relative;
		padding: 0 $year-padding;
		border-color: currentColor;<commit_msg>CUI: date-time: tweak font size, paddings, margins of the dropdowns in the header<commit_after>// Calendar Popup
.cui-layer-root-cui-date-time-popover .cui-layer > .cui-pane > .cui-vertical-layout-center {
	overflow: hidden; // override default, see: .cui-layer > .cui-pane > .cui-vertical-layout-center

	@include pane-padding-reset();

	margin: 0;
}

.cui-date-time-popover .cui-date-time-popover-inner {
	--calendar-background: #{$calendar-background};
	--calendar-static-cells-background: #{$calendar-static-cells-background};

	background-color: var(--calendar-background);
	flex: 1 1 auto;

	.cui-date-time-header {
		display: none; // todo: remove from markup?
	}

	&[browser='time'] {
		.cui-date-time-calendar {
			margin-left: -100%;
		}
	}

	.cui-date-time-browser {
		display: flex;
		// overflow: hidden; cuts off year-picker outline
		flex: 1 1 auto;

		.cui-date-time-calendar,
		.cui-date-time-clock {
			width: 100%;
		}

		.cui-date-time-calendar {
			transition: margin-left 0.5s ease-out;
		}
	}
}

.cui-date-time-clock {
	display: none; // todo: remove from markup?
}

// Calendar
// DateTime Format | Day:Month:Year | Hour:Minute |
.cui-date-time-calendar {
	font-size: $calendar-font-size;

	.cui-table {
		border: 0;
		margin-top: $spacer-sm;
	}

	.cui-buttonbar {
		padding: $spacer-sm;
		justify-content: space-between;
	}
	
	// Apply layer header styling
	> .cui-buttonbar {
		background: $layer-header-background;
		color: $layer-header-color;
		padding: $spacer $spacer-sm;
		display: grid;
		grid-template-columns: auto auto;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'd_title t_title'
			'date time';
		gap: 0 $spacer;

		> *:not(:last-child) {
			margin: 0;
		}

		@include ungroup-visually-inverted();

		.cui-button-select {
			@include button-inverted();

			.cui-button-center {
				padding-left: $btn-padding-x/2;
			}

			.cui-button-right {
				padding-right: $spacer-xs;
			}
		}

		.cui-select-date-title,
		.cui-select-time-title {
			@include layer-title();
	
			margin-bottom: $spacer-sm;
			margin-left: $btn-padding-x/2;
		}
	
		.cui-select-date-title {
			grid-area: d_title;
		}
	
		.cui-select-time-title {
			grid-area: t_title;
		}
	
		.cui-buttonbar-group-date {
			grid-area: date;
		}
	
		.cui-buttonbar-group-time {
			grid-area: time;
			padding-right: $spacer-xs;
		}
	}

	.cui-buttonbar-group-date,
	.cui-buttonbar-group-time {
		.cui-data-field-input > .cui-button-select {
			width: auto;
		}
	}

	.cui-buttonbar-group-time {
		.cui-select:not(.cui-date-time-am-pm-select):not(:first-child)::before {
			content: ':';
			position: relative;
			top: 4px;
			left: 2px;
			color: theme-color('muted');
		}
	}

	.cui-select {
		.cui-button-center {
			span:empty::after {
				content: '\2013\2013';
			}
		}

		&.cui-date-time-am-pm-select .cui-button-center {
			width: 32px;

			span:empty::after {
				content: 'am';
				display: block;
				position: relative;
				top: -1px;
			}
		}
	}
}

.cui-date-time-footer {
	overflow: visible !important; // show year input outline
	margin-bottom: $spacer-xs;

	.cui-buttonbar > *:not(:last-child) {
		margin-right: 0;
	}
		
	.cui-date-time-header-month,
	.cui-date-time-header-year .cui-buttonbar-group {
		@include ungroup-visually();
		@include buttonbar-group-navigation();
	}

	[cui-data-field-name='year'] input {
		$year-padding: $spacer-xs;

		width: calc(4ch + 4 * #{$year-padding});
		min-width: 0;
		text-align: center;
		position: relative;
		padding: 0 $year-padding;
		border-color: currentColor;
{'fraction_non_alphanumeric': 0.1710412460340352, 'fraction_numerical': 0.010960484568791463, 'mean_word_length': 2.8916947250280582, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '363615', 'n_tokens_mistral': 3153, 'n_tokens_neox': 2726, 'n_words': 465}