/**
 * Component — Search Form
 * @package Recipes_Lola
 * @version 1.0.0
 */

.rl-search-form { position: relative; display: flex; align-items: center; inline-size: 100%; }
.rl-search-form__input { inline-size: 100%; block-size: var(--rl-input-height); padding-inline-start: var(--rl-space-11); padding-inline-end: var(--rl-input-padding-x); background-color: var(--rl-input-bg); border: var(--rl-border-width) solid var(--rl-input-border); border-radius: var(--rl-input-radius); font-size: var(--rl-input-font-size); color: var(--rl-color-foreground); transition: border-color var(--rl-input-transition); }
.rl-search-form__input::placeholder { color: var(--rl-color-foreground-placeholder); }
.rl-search-form__input:focus-visible { border-color: var(--rl-input-border-focus); outline: none; box-shadow: var(--rl-shadow-focus); }
.rl-search-form__icon { position: absolute; inset-inline-start: var(--rl-space-4); inline-size: var(--rl-icon-size-md); block-size: var(--rl-icon-size-md); color: var(--rl-color-foreground-subtle); pointer-events: none; }
.rl-search-form__submit { position: absolute; inset-inline-end: var(--rl-space-2); display: inline-flex; align-items: center; justify-content: center; inline-size: var(--rl-space-9); block-size: var(--rl-space-9); border-radius: var(--rl-radius-sm); color: var(--rl-color-foreground-muted); transition: background-color var(--rl-transition-fast), color var(--rl-transition-fast); }
.rl-search-form__submit:hover { background-color: var(--rl-color-surface-raised); color: var(--rl-color-foreground); }
.rl-search-form__label { position: absolute; inline-size: var(--rl-space-px); block-size: var(--rl-space-px); padding: 0; margin: calc(var(--rl-space-px) * -1); overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border-width: 0; }
.rl-search-form--lg .rl-search-form__input { block-size: var(--rl-input-height-lg); font-size: var(--rl-text-lg); padding-inline-start: var(--rl-space-14); }
.rl-search-form--lg .rl-search-form__icon { inline-size: var(--rl-icon-size-lg); block-size: var(--rl-icon-size-lg); inset-inline-start: var(--rl-space-5); }