/*
	Restyles Tom Select (https://tom-select.js.org) to match the site's plainer native
	<select>/.form-control look instead of Tom Select's own default skin. Used by every
	Tom Select instance on the Employer/School selection pages (see EmployerSelection.jspf
	in earth-month-pledge-portlet, grp-signup-form-portlet, and rideshare-profile-portlet --
	this file is duplicated identically in each of those three portlets' own css/ folder,
	since there is currently no working shared/common-module CSS delivery mechanism in this
	workspace to avoid the duplication. See project notes on reviving the nysdot-assets
	theme-contributor bundle for that).

	Requires tom-select.default.min.css to already be loaded -- this only overrides specific
	properties, it does not replace Tom Select's base stylesheet.
*/

/*
	.ts-wrapper already inherits the theme's .form-control box (gray gradient background,
	border, border-radius) because Tom Select copies the original <select> element's own
	classes onto the wrapper it generates. .ts-control was drawing a second, redundant box
	on top of that -- strip its own box styling so only one box shows.

	.ts-wrapper also inherits .form-control's own height/padding/border, but Tom Select's own
	CSS auto-sizes .ts-wrapper around its content instead of respecting that fixed height --
	so .ts-wrapper's own padding was stacking on top of .ts-control's, producing a 56px-tall
	control instead of the site's normal 40px. Fix: make .ts-wrapper the one element with a
	fixed, non-padded 40px box, and have .ts-control simply fill it (height: 100%) rather than
	each contributing its own height/padding independently.
*/
.ts-wrapper.single {
	height: 40px;
	padding: 0;
}

/*
	Font-size/padding match the site's standard .form-control (16px / 7px 16px); Tom Select's
	own default skin used a smaller 13px font. .ts-control is already a flex container, so
	align-items: center vertically centers the text/input properly instead of relying on a
	line-height hack.

	Deliberately NOT using the theme's --font-family-base/--font-weight-normal custom
	properties here, even though they're available and currently resolve to these exact
	values: the Employer Portal pages predate Liferay's Style Book feature and are still
	styled with plain hardcoded CSS like this, not the variable-driven system Style Books
	read from. If a Style Book is ever created for one of these employer-branded portals and
	changes the base font, referencing the variable here would make this ONE control react
	while every other hardcoded control on the page stayed on the old font -- a worse
	mismatch than just staying consistent with the rest of the (currently non-variable-driven)
	page. Revisit this once/if the employer portal pages are migrated to be Style-Book-aware
	throughout.
*/
.ts-wrapper.single .ts-control {
	height: 100%;
	align-items: center;
	padding: 7px 16px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	background: none;
	border: none;
	box-shadow: none;
}

.ts-wrapper.single .ts-control input {
	font-size: inherit;
}