/**
 * CorivaDx Lab Directory reusable interface components.
 */

/*--------------------------------------------------------------
Header logo
--------------------------------------------------------------*/

body.corivadx-lab-app .corivadx-lab-header__logo {
	display: flex;
	justify-content: center;
}

body.corivadx-lab-app .corivadx-lab-header__logo-link {
	display: inline-block;
	text-decoration: none;
}

body.corivadx-lab-app .corivadx-lab-header__logo-image {
	display: block;
	width: 300px;
	height: auto;
	max-width: min(420px, 100%);
	max-height: 140px;
}

body.corivadx-lab-app .corivadx-lab-header__logo-text {
	color: var(
		--corivadx-lab-color-primary
	);
	font-size: 24px;
	font-weight: var(
		--corivadx-lab-font-weight-bold
	);
	line-height: var(
		--corivadx-lab-line-height-tight
	);
	text-decoration: none;
}

/*--------------------------------------------------------------
Footer logo
--------------------------------------------------------------*/

body.corivadx-lab-app .corivadx-lab-footer__logo-link {
	display: inline-block;
}

body.corivadx-lab-app .corivadx-lab-footer__logo-image {
	display: block;
	width: 190px;
	height: auto;
	max-width: 100%;
	max-height: 100px;
}

body.corivadx-lab-app .corivadx-lab-footer__logo-text {
	font-size: 18px;
	font-weight: var(
		--corivadx-lab-font-weight-bold
	);
	line-height: var(
		--corivadx-lab-line-height-tight
	);
}

/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/

body.corivadx-lab-app .button,
body.corivadx-lab-app .corivadx-lab-button {
	display: inline-flex;
	min-height: 52px;
	align-items: center;
	justify-content: center;
	padding: 10px 28px;
	border: 0;
	border-radius: var(
		--corivadx-lab-radius-sm
	);
	background-color: var(
		--corivadx-lab-color-primary-alt
	);
	color: var(
		--corivadx-lab-color-white
	);
	font-family: var(
		--corivadx-lab-font-primary
	);
	font-size: var(
		--corivadx-lab-font-size-base
	);
	font-weight: var(
		--corivadx-lab-font-weight-light
	);
	letter-spacing: 0.02em;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color
			var(--corivadx-lab-transition-fast),
		box-shadow
			var(--corivadx-lab-transition-fast);
}

body.corivadx-lab-app .button:hover,
body.corivadx-lab-app .corivadx-lab-button:hover {
	background-color: var(
		--corivadx-lab-color-primary-dark
	);
}

body.corivadx-lab-app .button:focus-visible,
body.corivadx-lab-app .corivadx-lab-button:focus-visible {
	outline:
		3px solid
		var(--corivadx-lab-color-white);
	outline-offset: 3px;
	box-shadow:
		0 0 0 5px
		var(--corivadx-lab-color-primary);
}

/*--------------------------------------------------------------
Content panels
--------------------------------------------------------------*/

body.corivadx-lab-app .content-panel {
	border-radius: var(
		--corivadx-lab-radius-lg
	);
	background-color: var(
		--corivadx-lab-color-white
	);
	box-shadow: var(
		--corivadx-lab-shadow-panel
	);
}

body.corivadx-lab-app .content-panel--primary {
	background-color: var(
		--corivadx-lab-color-primary
	);
	color: var(
		--corivadx-lab-color-white
	);
}

/*--------------------------------------------------------------
Form controls
--------------------------------------------------------------*/

body.corivadx-lab-app .form-control,
body.corivadx-lab-app .corivadx-lab-form-control {
	width: 100%;
	min-height: 56px;
	padding: 0 20px;
	border:
		1px solid
		var(--corivadx-lab-color-border);
	border-radius: var(
		--corivadx-lab-radius-md
	);
	background-color: var(
		--corivadx-lab-color-white
	);
	color: var(
		--corivadx-lab-color-text
	);
	font-family: var(
		--corivadx-lab-font-primary
	);
	font-size: var(
		--corivadx-lab-font-size-base
	);
	font-weight: var(
		--corivadx-lab-font-weight-light
	);
}

body.corivadx-lab-app .form-control::placeholder,
body.corivadx-lab-app .corivadx-lab-form-control::placeholder {
	color: var(
		--corivadx-lab-color-muted
	);
	opacity: 1;
}

body.corivadx-lab-app .form-control:focus,
body.corivadx-lab-app .corivadx-lab-form-control:focus {
	border-color: var(
		--corivadx-lab-color-primary
	);
	outline: 3px solid rgb(40 105 155 / 20%);
}

/*--------------------------------------------------------------
Lab search form
--------------------------------------------------------------*/

body.corivadx-lab-app .lab-search-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 160px;
	overflow: hidden;
	border-radius: var(
		--corivadx-lab-radius-md
	);
	background-color: var(
		--corivadx-lab-color-white
	);
}

body.corivadx-lab-app .lab-search-form__input {
	width: 100%;
	min-width: 0;
	height: 64px;
	padding:
		0
		var(--corivadx-lab-space-3);
	border: 0;
	border-radius: 0;
	background-color: var(
		--corivadx-lab-color-white
	);
	color: var(
		--corivadx-lab-color-text
	);
	font-size: var(
		--corivadx-lab-font-size-base
	);
	font-weight: var(
		--corivadx-lab-font-weight-light
	);
	outline: none;
}

body.corivadx-lab-app .lab-search-form__input::placeholder {
	color: var(
		--corivadx-lab-color-muted
	);
	opacity: 1;
}

body.corivadx-lab-app .lab-search-form__input:focus {
	box-shadow:
		inset 0 0 0 3px
		rgb(40 105 155 / 35%);
}

body.corivadx-lab-app .lab-search-form__button {
	min-height: 52px;
	margin: 6px;
	padding:
		10px
		var(--corivadx-lab-space-3);
	border: 0;
	border-radius: 3px;
	background-color: var(
		--corivadx-lab-color-primary-alt
	);
	color: var(
		--corivadx-lab-color-white
	);
	font-size: 17px;
	font-weight: var(
		--corivadx-lab-font-weight-light
	);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color
			var(--corivadx-lab-transition-fast);
}

body.corivadx-lab-app .lab-search-form__button:hover {
	background-color: var(
		--corivadx-lab-color-primary-dark
	);
}

body.corivadx-lab-app .lab-search-form__button:focus-visible {
	outline:
		3px solid
		var(--corivadx-lab-color-white);
	outline-offset: -5px;
}

/*--------------------------------------------------------------
Header actions
--------------------------------------------------------------*/

body.corivadx-lab-app .corivadx-lab-header__logout {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
	border:
		1px solid
		var(--corivadx-lab-color-primary);
	border-radius: var(
		--corivadx-lab-radius-sm
	);
	color: var(
		--corivadx-lab-color-primary
	);
	font-size: var(
		--corivadx-lab-font-size-sm
	);
	font-weight: var(
		--corivadx-lab-font-weight-regular
	);
	text-decoration: none;
	transition:
		background-color
			var(--corivadx-lab-transition-fast),
		color
			var(--corivadx-lab-transition-fast);
}

body.corivadx-lab-app .corivadx-lab-header__logout:hover,
body.corivadx-lab-app .corivadx-lab-header__logout:focus-visible {
	background-color: var(
		--corivadx-lab-color-primary
	);
	color: var(
		--corivadx-lab-color-white
	);
}

/*--------------------------------------------------------------
Lab alphabetical browser
--------------------------------------------------------------*/

body.corivadx-lab-app .lab-alpha-browser {
	margin-top: var(
		--corivadx-lab-space-4
	);
	text-align: center;
}

body.corivadx-lab-app .lab-alpha-browser__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 4px;
	border: 0;
	background: transparent;
	color: var(
		--corivadx-lab-color-primary
	);
	font-family: var(
		--corivadx-lab-font-primary
	);
	font-size: var(
		--corivadx-lab-font-size-base
	);
	font-weight: var(
		--corivadx-lab-font-weight-bold
	);
	cursor: pointer;
}

body.corivadx-lab-app .lab-alpha-browser__toggle:hover {
	color: var(
		--corivadx-lab-color-primary-dark
	);
}

body.corivadx-lab-app .lab-alpha-browser__toggle:focus-visible {
	outline: 3px solid rgb(40 105 155 / 25%);
	outline-offset: 4px;
}

body.corivadx-lab-app .lab-alpha-browser__icon {
	position: relative;
	top: -7px;
	display: inline-block;
	font-size: 20px;
	line-height: 1;
	transition:
		transform
			var(--corivadx-lab-transition-fast);
}

body.corivadx-lab-app
	.lab-alpha-browser__toggle[aria-expanded="true"]
	.lab-alpha-browser__icon {
	top: 5px;
	transform: rotate(180deg);
}

body.corivadx-lab-app .lab-alpha-browser__options {
	display: grid;
	grid-template-columns:
		repeat(9, minmax(44px, 1fr));
	gap: 10px;
	max-width: 760px;
	margin:
		var(--corivadx-lab-space-3)
		auto
		0;
}

body.corivadx-lab-app .lab-alpha-browser__options[hidden] {
	display: none;
}

body.corivadx-lab-app .lab-alpha-browser__letter {
	min-height: 44px;
	padding: 8px;
	border:
		1px solid
		var(--corivadx-lab-color-primary);
	border-radius: var(
		--corivadx-lab-radius-sm
	);
	background-color: var(
		--corivadx-lab-color-white
	);
	color: var(
		--corivadx-lab-color-primary
	);
	font-family: var(
		--corivadx-lab-font-primary
	);
	font-size: var(
		--corivadx-lab-font-size-base
	);
	font-weight: var(
		--corivadx-lab-font-weight-bold
	);
	cursor: pointer;
	transition:
		background-color
			var(--corivadx-lab-transition-fast),
		color
			var(--corivadx-lab-transition-fast);
}

body.corivadx-lab-app .lab-alpha-browser__letter:hover,
body.corivadx-lab-app .lab-alpha-browser__letter:focus-visible,
body.corivadx-lab-app .lab-alpha-browser__letter.is-active {
	background-color: var(
		--corivadx-lab-color-primary
	);
	color: var(
		--corivadx-lab-color-white
	);
}

body.corivadx-lab-app .lab-alpha-browser__letter:focus-visible {
	outline: 3px solid rgb(40 105 155 / 25%);
	outline-offset: 2px;
}

@media (max-width: 720px) {
	body.corivadx-lab-app .lab-alpha-browser__options {
		grid-template-columns:
			repeat(6, minmax(42px, 1fr));
	}
}

@media (max-width: 480px) {
	body.corivadx-lab-app .lab-alpha-browser__options {
		grid-template-columns:
			repeat(5, minmax(42px, 1fr));
		gap: 8px;
	}
}