/**
 * Styles to customize the look of Google Custom Search
 * The styles are scoped for extra specificity so that the Google CSE styles
 * get overriden.
 */

/**
 * Hide the Ad search results
 */

.Reader .gsc-adBlock {
	display: none;
}

/**
 * Don't need extra padding around the results, handled by Welcome Packet layout
 */

.Reader .gsc-control-cse {
	padding: 0;
}

.Reader .gsc-control-cse,
.Reader .gsc-control-cse .gsc-table-result {
	font-family: 'Noto Sans', sans-serif;
}

/**
 * Styles provided by Baptist Health team
 * The `Reader` prefix was added so scope the styles to the Welcome Packet
 */

.Reader .gsc-expansionArea > * + * {
	margin-top: 1.125rem !important;
}

.Reader .gsc-webResult.gsc-result {
	background-color: #efefef !important;
	border: none;
	border-radius: 3px;
	box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.09);
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans', sans-serif;
	padding: 0 !important;
	position: relative;
	transition: box-shadow 0.2s ease;
	width: 100%;
}

.Reader .gs-webResult.gs-result {
	border-radius: inherit;
	flex: 1 0 auto;
	padding: 1.125rem;
	z-index: 1;
}

.Reader .gs-webResult.gs-result > * + * {
	margin-top: 0.333rem;
}

.Reader a.gs-title {
	transition: color 0.2s ease;
}

.Reader a.gs-title:hover {
	text-decoration: none;
}

.Reader a.gs-title::after {
	box-shadow: 0 1px 6px 2px rgb(0 0 0 / 0.1);
	content: '';
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity 0.2s ease;
	width: 100%;
	z-index: 2;
}

.Reader a.gs-title:hover::after,
.Reader a.gs-title:focus::after {
	opacity: 1;
}

/**
 * Since we want other links in the card to still function as links, we need to
 * disable the above for all links that do not have the `Card-primaryAction`
 * class. Disabling stylelint so we can sneak in a child element selector.
 */

.Reader .gs-webResult.gs-result a:not(.gs-title) {
	position: relative;
	z-index: 3;
}

/**
 * "About <number> results" content above search results
 */

.Reader .gsc-above-wrapper-area {
	margin-bottom: 1.125rem;
}

/**
 * Pagination numbers wrapper below search results
 */

.Reader .gsc-cursor {
	display: flex !important;
	flex-wrap: wrap;
	height: calc(2em + 1);
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	padding-left: 3em;
	padding-right: 3em;
	position: relative;
}

/**
 * Individual pagination number
 */

.Reader .gsc-cursor-page {
	display: inline-block;
	font-family: 'Noto Sans', sans-serif;
	font-size: 1rem;
	padding: 0.5em;
}

.Reader .gsc-cursor-page:hover,
.Reader .gsc-cursor-page:focus {
	text-decoration: underline;
}

/**
 * Current page number
 */

.Reader .gsc-cursor-current-page {
	border-radius: 8px;
}

.Reader .gsc-cursor-current-page:hover {
	text-decoration: none !important;
}

/**
 * The table wrapper for the search input
 */

.Reader td.gsc-input {
	padding: 0;
	padding-right: 1rem !important;
}

/**
 * The table cell wrapper for the search input
 */

.Reader td.gsib_a {
	padding: 0;
}

/**
 * Wraps the search input table
 */

.Reader .gsc-input-box {
	border: none;
	position: relative;
}

/**
 * Wraps the search "x" clear button
 */

.Reader .gsst_b {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

/**
 * The actual search input
 * 1. Fixes an issue where an input may not shrink with its container in Firefox.
 *    @TODO: Consider moving this fix to the input component.
 */

.Reader input.gsc-input {
	appearance: none;
	background-color: #fff !important;
	border: 2px solid #ddd !important;
	border-radius: 5px;
	box-sizing: border-box;
	color: currentColor;
	display: block;
	font-family: 'Noto Sans', sans-serif;
	font-size: inherit;
	font-weight: inherit;
	height: 44px !important;
	line-height: inherit;
	margin: 0 !important; /* 1 */
	min-width: 0; /* 1 */
	padding: 1ex 1em !important;
	transition-duration: 0.2s;

	/* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
	transition-property: all;
	transition-timing-function: ease;
	width: 100% !important;
}

.Reader input.gsc-input:disabled {
	opacity: 0.5;
}

.Reader input.gsc-input:focus {
	border: 2px solid #0055a5 !important;
	box-shadow: 0 0 0 3px #ddd;
	outline: none;
}

/**
 * Wraps input section including submit button
 */

.Reader .gsc-search-box {
	margin-bottom: 0;
}

/**
 * The search submit button
 */

.Reader .gsc-search-button-v2 {
	border-radius: 8px !important;
	border-style: solid !important;
	border-width: 2px !important;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	height: 44px;
	line-height: normal;
	margin: 0;
	padding: 0.8889rem 1.125rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	transition-duration: 0.2s;
	transition-property: background-color, border-color, color, opacity;
	transition-timing-function: ease;
	user-select: none;
}

.Reader .gsc-above-wrapper-area-container {
	font-family: 'Noto Sans', sans-serif;
	margin-top: 0.333rem;
}

/**
 * Changes the refinement options to look like buttons/pills
 */

.Reader .gsc-refinementHeader {
	background: transparent;
	border-radius: 8px;
	border-style: solid;
	border-width: 2px;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	flex: 0 0 auto;
	font: inherit;
	font-family: inherit;
	font-weight: 400;
	line-height: normal;
	margin: 0;
	padding: 0.4933rem 0.7901rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	transition-duration: 0.2s;
	transition-property: background-color, border-color, color, opacity;
	transition-timing-function: ease;
	user-select: none;
}

.Reader .gsc-refinementHeader.gsc-refinementhInactive {
	cursor: pointer;
	padding-bottom: 0.4933rem;
}

.Reader .gsc-refinementHeader.gsc-refinementhInactive:hover,
.Reader .gsc-refinementHeader.gsc-refinementhInactive:focus {
	outline: none;
}

.Reader .gsc-refinementHeader.gsc-refinementhActive {
	border-color: transparent !important;
	text-shadow: none;
}

.Reader .gsc-refinementHeader.gsc-refinementhActive:hover,
.Reader .gsc-refinementHeader.gsc-refinementhActive:focus {
	outline: none;
}

.Reader .gsc-refinementsArea {
	border-bottom: none;
}

.Reader .gsc-refinementBlock {
	display: flex;
	flex-wrap: wrap;
}

.Reader .gsc-refinementBlock .gs-spacer {
	display: inline-block;
	width: 0.125rem;
}

.Reader .gs-spacer,
.Reader .gsc-refinementHeader {
	margin-bottom: 0.125rem;
}

.Reader .gs-per-result-labels {
	display: none;
}
