.ybsb-search-wrapper {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center; /* self-centers vertically when a parent row
	                         stretches this widget's column taller than its
	                         own content - e.g. next to a Toolbar widget of
	                         a different natural height */
	height: 100%;
}

.ybsb-search-bar {
	position: relative;
	display: flex;
	padding: var(--ybsb-search-ring-width, 3px);
	box-sizing: border-box;
	transition: border-color 0.2s ease-in-out;
}

.ybsb-search-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border-radius: inherit;
}

.ybsb-search-mode-compact .ybsb-search-bar {
	width: var(--ybsb-search-collapsed-size, 48px);
	height: var(--ybsb-search-collapsed-size, 48px);
	transition: width var(--ybsb-search-transition-speed, 250ms) ease-in-out,
	            border-color 0.2s ease-in-out;
}

.ybsb-search-mode-compact .ybsb-search-bar:not(:hover):not(:focus-within) {
	border-radius: 50%;
}

.ybsb-search-mode-compact .ybsb-search-inner {
	height: 100%;
}

.ybsb-search-mode-compact .ybsb-search-bar:not(:hover):not(:focus-within) .ybsb-search-inner {
	padding: 0;
	gap: 0;
	justify-content: center;
}

.ybsb-search-trigger-hover.ybsb-search-mode-compact .ybsb-search-bar:hover,
.ybsb-search-trigger-hover-focus.ybsb-search-mode-compact .ybsb-search-bar:hover,
.ybsb-search-trigger-hover-focus.ybsb-search-mode-compact .ybsb-search-bar:focus-within {
	width: var(--ybsb-search-expanded-width, 280px);
}

.ybsb-search-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ybsb-search-accent-on.ybsb-search-mode-compact .ybsb-search-icon {
	display: none;
}

.ybsb-search-icon svg,
.ybsb-search-icon i {
	display: block;
}

.ybsb-search-input {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

.ybsb-search-mode-compact .ybsb-search-bar:not(:hover):not(:focus-within) .ybsb-search-input {
	color: transparent;
	caret-color: transparent;
}

.ybsb-search-mode-compact .ybsb-search-bar:not(:hover):not(:focus-within) .ybsb-search-input::placeholder {
	color: transparent;
}

.ybsb-search-clear {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	user-select: none;
	padding: 0.4em;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.ybsb-search-clear-hidden {
	display: none;
}

.ybsb-search-clear svg,
.ybsb-search-clear i {
	display: block;
}

.ybsb-search-mode-compact .ybsb-search-bar:not(:hover):not(:focus-within) .ybsb-search-clear,
.ybsb-search-mode-compact .ybsb-search-bar:not(:hover):not(:focus-within) .ybsb-search-button {
	opacity: 0;
	pointer-events: none;
	width: 0;
	flex-basis: 0;
	overflow: hidden;
	transition: opacity var(--ybsb-search-transition-speed, 250ms) ease-in-out;
}

.ybsb-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 8px;
	cursor: pointer;
	border: none;
	background: none;
	font: inherit;
	position: relative;
	overflow: hidden;
	z-index: 0;
	--ybsb-search-btn-hover-duration: 300ms;
	transition: background-color var(--ybsb-search-btn-hover-duration, 300ms) ease-in-out,
	            color var(--ybsb-search-btn-hover-duration, 300ms) ease-in-out;
}

.ybsb-search-button-text-wrap {
	display: inline-flex;
	align-items: center;
	gap: inherit;
	position: relative;
	z-index: 1;
}

.ybsb-search-button-icon svg,
.ybsb-search-button-icon i {
	display: block;
}

.ybsb-search-button[class*="ybsb-search-slide-"]::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--ybsb-search-btn-slide-color, transparent);
	z-index: 0;
	transition: transform var(--ybsb-search-btn-hover-duration, 300ms) ease-in-out;
}

.ybsb-search-button.ybsb-search-slide-left::before {
	transform: scaleX(0);
	transform-origin: left;
}
.ybsb-search-button.ybsb-search-slide-left:hover::before {
	transform: scaleX(1);
}

.ybsb-search-button.ybsb-search-slide-right::before {
	transform: scaleX(0);
	transform-origin: right;
}
.ybsb-search-button.ybsb-search-slide-right:hover::before {
	transform: scaleX(1);
}

.ybsb-search-button.ybsb-search-slide-top::before {
	transform: scaleY(0);
	transform-origin: top;
}
.ybsb-search-button.ybsb-search-slide-top:hover::before {
	transform: scaleY(1);
}

.ybsb-search-button.ybsb-search-slide-bottom::before {
	transform: scaleY(0);
	transform-origin: bottom;
}
.ybsb-search-button.ybsb-search-slide-bottom:hover::before {
	transform: scaleY(1);
}

@media (max-width: 480px) {
	.ybsb-search-bar {
		flex-wrap: nowrap;
	}
}

.ybsb-search-accent-on .ybsb-search-bar::after {
	content: '';
	position: absolute;
	top: calc(50% + var(--ybsb-search-accent-offset-y, 0px));
	right: var(--ybsb-search-accent-offset-x, -10px);
	z-index: 2;
	pointer-events: none;
	width: var(--ybsb-search-accent-width, 4px);
	height: var(--ybsb-search-accent-height, 25px);
	border-radius: var(--ybsb-search-accent-radius, 2px);
	transform: translateY(-50%) rotate(var(--ybsb-search-accent-rotate, -35deg));
	transition: top var(--ybsb-search-transition-speed, 250ms) ease-in-out,
	            right var(--ybsb-search-transition-speed, 250ms) ease-in-out,
	            transform var(--ybsb-search-transition-speed, 250ms) ease-in-out;
}

.ybsb-search-accent-on .ybsb-search-bar:hover::after,
.ybsb-search-accent-on .ybsb-search-bar:focus-within::after {
	top: calc(50% + var(--ybsb-search-accent-hover-offset-y, var(--ybsb-search-accent-offset-y, 0px)));
	right: var(--ybsb-search-accent-hover-offset-x, var(--ybsb-search-accent-offset-x, -10px));
	transform: translateY(-50%) rotate(var(--ybsb-search-accent-hover-rotate, var(--ybsb-search-accent-rotate, -35deg)));
}