.resource-search {
margin-top: 1rem;
}
.resource-search-field {
background-color: #fff; border: 1px solid transparent;
border-radius: 0.625rem;
box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.15);
gap: 0.5rem;
padding: 0.5rem 0.5rem 0.5rem 0.875rem;
transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
} .resource-search-field:focus-within {
border-color: #284b66;
box-shadow: 0 0 0 0.25rem rgba(120, 167, 205, 0.35), 0 0 1.25rem rgba(0, 0, 0, 0.15);
}
.resource-search-icon {
color: #112b3d;
flex: 0 0 auto;
height: 1.25rem;
width: 1.25rem;
}
.resource-search-input {
appearance: none;
background: none;
border: none;
color: #112b3d; flex: 1 1 0;
font-size: 1rem;
min-width: 0;
outline: none;
padding: 0.375rem 0;
width: auto;
}
.resource-search-input::placeholder {
color: #707070;
opacity: 1;
} .resource-search-input:focus,
.resource-search-input:focus-visible {
box-shadow: none !important;
outline: 0;
} .resource-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.resource-search-clear {
appearance: none;
background: none;
border: none;
border-radius: 100%;
color: #707070;
flex: 0 0 auto;
font-size: 1.5rem;
height: 1.75rem;
line-height: 1;
padding: 0;
transition: color 0.3s ease-in-out;
width: 1.75rem;
}
.resource-search-clear:hover,
.resource-search-clear:focus-visible {
color: #112b3d;
}
.resource-search-clear.is-hidden {
display: none;
}
.resource-search-submit {
background-color: #112b3d;
border: 1px solid #112b3d;
border-radius: 0.5rem;
color: #fff;
flex: 0 0 auto;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.05em;
padding: 0.5rem 1.25rem;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.resource-search-submit:hover,
.resource-search-submit:focus-visible {
background-color: #fff;
color: #112b3d;
} .resource-search-submit:focus-visible,
.resource-search-clear:focus-visible {
box-shadow: 0 0 0 0.1875rem rgba(120, 167, 205, 0.55) !important;
outline: 0;
}
.resource-search-status {
color: #112b3d;
font-weight: 500;
margin-bottom: 1rem;
}
.resource-search-empty {
padding: 3rem 1rem;
}
.resource-search-empty p {
color: #707070;
margin-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
.resource-search-submit {
font-size: 0.8125rem;
padding: 0.5rem 0.875rem;
}
}