<commit_before>@at-root #{$namespace} {

	@if luiTheme(element, field, datepicker, enabled) {
		$vars: luiTheme(element, field, datepicker);

		// Reset
		luid-date-picker,
		luid-date-picker-popup,
		luid-daterange-picker {
			display: inline-block;
			vertical-align: middle;
		}

		// Fitting size
		// ====
		#{$prefix}.fitting.field {
			luid-date-picker,
			luid-date-picker-popup,
			luid-daterange-picker {
				display: block;
				width: 100%;

				> .input {
					width: 100% !important;
				}
			}
		}

		luid-date-picker-popup,
		luid-daterange-picker {
			&.ng-open > .lui.input > input {
				@extend %lui_input_focus;
			}
			&.ng-invalid.ng-touched > .lui.input > input,
			&.ng-not-empty.ng-pristine.ng-invalid > .lui.input > input {
				@extend %lui_input_invalid_input;
			}
		}

		// Neutralize popover max-width
		// ====
		luid-date-picker-popup .popover-inner,
		luid-daterange-picker .popover-inner {
			max-width: none !important;
			margin: luiTheme(element, field, field, focus-border-width) !important;
		}

		// Handle multiple calendars
		// ====
		luid-date-picker[displayed-calendars],
		luid-date-picker-popup[displayed-calendars],
		luid-daterange-picker {
			.calendar > header > button {
				display: none !important;
			}
			.calendar:first-child > header button.previous,
			.calendar:last-child > header button.next {
				display: block !important;
			}
			.calendar {
				float: left;
				& + .calendar {
					margin-left: 1em;
				}
			}
		}
		luid-date-picker-popup[displayed-calendars],
		luid-daterange-picker {
			.popover-inner {
				box-sizing: border-box;
				width: 14 * map-gets($vars, day,size) + 1;
			}
		}

		// Style input
		// ====
		luid-date-picker-popup .lui.datepicker.input,
		luid-daterange-picker .lui.daterange.input {
			position: relative;
			max-width: 100%;

			> input, label {
				width: 100% !important;
				padding-right: 2.25em;
			}
			i.empty { z-index: 1; }
		}

		luid-date-picker-popup,
		luid-daterange-picker {
			position: relative;
			&.ng-empty {
				i.empty { display: none; }
				@include lui_make_icon("calendar", right);
				&:after {
					pointer-events: none;
					@extend %lui_field_input_inner_right_icon;
				}
			}
		}

		luid-daterange-picker {
			&.ng-open {
				> input {
					color: transparent !important;
				}
			}
			.inputs {
				@include display-flex();
				@include flex-wrap(nowrap);
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;

				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 0.5em;
				}

				> input {
					width: 50% !important;
					box-sizing: border-box;
					border: none;
					margin: 0;
					outline: 0;
					outline: none;
					&:first-child {
						padding-right: 1em;
					}
					&:last-child {
						padding-left: 1em;
					}
				}
			}

		}

		luid-date-picker,
		luid-date-picker-popup .popover-content,
		luid-daterange-picker .popover-content {

			.calendars {
				@extend %lui_clearfix;
			}
			.calendar {
				position: relative;
			}

			.calendar > header {<commit_msg>daterange-picker [mod] updated style to be semantically correct<commit_after>@at-root #{$namespace} {

	@if luiTheme(element, field, datepicker, enabled) {
		$vars: luiTheme(element, field, datepicker);

		// Reset
		luid-date-picker,
		luid-date-picker-popup,
		luid-daterange-picker {
			display: inline-block;
			vertical-align: middle;
		}

		// Fitting size
		// ====
		#{$prefix}.fitting.field {
			luid-date-picker,
			luid-date-picker-popup,
			luid-daterange-picker {
				display: block;
				width: 100%;

				> .input {
					width: 100% !important;
				}
			}
		}

		luid-date-picker-popup,
		luid-daterange-picker {
			&.ng-open > .lui.input > input {
				@extend %lui_input_focus;
			}
			&.ng-invalid.ng-touched > .lui.input > input,
			&.ng-not-empty.ng-pristine.ng-invalid > .lui.input > input {
				@extend %lui_input_invalid_input;
			}
		}

		// Neutralize popover max-width
		// ====
		luid-date-picker-popup .popover-inner,
		luid-daterange-picker .popover-inner {
			max-width: none !important;
			margin: luiTheme(element, field, field, focus-border-width) !important;
		}

		// Handle multiple calendars
		// ====
		luid-date-picker[displayed-calendars],
		luid-date-picker-popup[displayed-calendars],
		luid-daterange-picker {
			.calendar > header > button {
				display: none !important;
			}
			.calendar:first-child > header button.previous,
			.calendar:last-child > header button.next {
				display: block !important;
			}
			.calendar {
				float: left;
				& + .calendar {
					margin-left: 1em;
				}
			}
		}
		luid-date-picker-popup[displayed-calendars],
		luid-daterange-picker {
			.popover-inner {
				box-sizing: border-box;
				width: 14 * map-gets($vars, day,size) + 1;
			}
		}

		// Style input
		// ====
		luid-date-picker-popup .lui.datepicker.input,
		luid-daterange-picker .lui.daterange.input {
			position: relative;
			max-width: 100%;

			> input, label {
				width: 100% !important;
				padding-right: 2.25em;
			}
			i.empty { z-index: 1; }
		}

		luid-date-picker-popup,
		luid-daterange-picker {
			position: relative;
			&.ng-empty {
				i.empty { display: none; }
				@include lui_make_icon("calendar", right);
				&:after {
					pointer-events: none;
					@extend %lui_field_input_inner_right_icon;
				}
			}
		}

		luid-daterange-picker {
			&.ng-open {
				> input {
					color: transparent !important;
				}
			}
			.inputs {
				@include display-flex();
				@include flex-wrap(nowrap);
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;

				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 0.5em;
				}

				> input {
					width: 50% !important;
					box-sizing: border-box;
					border: none;
					margin: 0;
					outline: 0;
					outline: none;
					&:first-of-type {
						padding-right: 1em;
					}
					&:last-of-type {
						padding-left: 1em;
					}
				}
			}

		}

		luid-date-picker,
		luid-date-picker-popup .popover-content,
		luid-daterange-picker .popover-content {

			.calendars {
				@extend %lui_clearfix;
			}
			.calendar {
				position: relative;
			}

			.calendar > header {
{'fraction_non_alphanumeric': 0.14918970448045757, 'fraction_numerical': 0.013028280902446775, 'mean_word_length': 2.350186269292177, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 33, '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': '6427104', 'n_tokens_mistral': 3065, 'n_tokens_neox': 2340, 'n_words': 417}