.search-modal { --search-border-radius: var(--style-border-radius-popover); --search-border-width: var(--style-border-width); } .search-modal__content { --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem); --modal-width: 66dvw; padding: 0; border: var(--style-border-popover); @media screen and (min-width: 750px) { width: var(--modal-width); margin-block-start: var(--modal-top-margin); overflow: hidden; } } @media screen and (max-width: 749px) { .search-modal__content::backdrop { display: none; } } .dialog-modal[open].search-modal__content { transform-origin: bottom center; animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards; border-radius: var(--search-border-radius); box-shadow: var(--shadow-popover); @media screen and (max-width: 749px) { border-radius: 0; } } .dialog-modal.search-modal__content.dialog-closing { animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards; } .search-modal__content[open] { display: flex; } .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) { position: relative; } .dialog-modal .predictive-search-form__header:has( .predictive-search__reset-button:not(.predictive-search__reset-button[hidden]) )::before { content: ''; position: absolute; right: calc(var(--padding-sm) + var(--minimum-touch-target)); top: 0; bottom: 0; width: var(--border-width-sm); background-color: var(--color-border); } .dialog-modal .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden])) > .predictive-search__close-modal-button { &::before { content: none; } } @media screen and (min-width: 750px) { .dialog-modal .predictive-search-form__header:has( .predictive-search__reset-button:not(.predictive-search__reset-button[hidden]) )::before { right: calc(var(--padding-2xl) * 2); } } predictive-search-component { --resource-card-corner-radius: var(--product-corner-radius); display: flex; width: 100%; position: relative; margin-inline: auto; align-items: center; background-color: var(--color-background); z-index: var(--layer-heightened); } .predictive-search-form__footer { display: none; position: absolute; bottom: 0; left: 0; right: 0; @media screen and (min-width: 750px) { --to-top-gradient-background: linear-gradient( to top, rgb(var(--color-background-rgb) / var(--opacity-90)), rgb(var(--color-background-rgb) / var(--opacity-80)), rgb(var(--color-background-rgb) / var(--opacity-40)), transparent ); padding-block: var(--padding-xs) var(--padding-lg); background-image: var(--to-top-gradient-background); } } predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results)) .predictive-search-form__footer { display: block; } .predictive-search-form { position: relative; width: 100%; align-self: flex-start; } .predictive-search-form__content { max-height: 50dvh; overflow-y: auto; background-color: var(--color-background); scrollbar-width: none; &::-webkit-scrollbar { display: none; } } .predictive-search-form__content-wrapper { position: absolute; top: 100%; width: 100%; left: 0; z-index: var(--layer-raised); display: flex; flex-direction: column; border-radius: 0 0 var(--search-border-radius) var(--search-border-radius); transition: box-shadow var(--animation-speed) var(--animation-easing); transform: translateZ(0); overflow: hidden; @media screen and (max-width: 749px) { border-radius: 0; } @media screen and (min-width: 750px) { max-height: var(--modal-max-height); } } .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results)) > .predictive-search-form__content { padding-block-end: var(--padding-6xl); } .predictive-search-form__header-inner { background: var(--color-background); border: var(--search-border-width) solid var(--color-border); color: var(--color-foreground); border-radius: var(--style-border-radius-popover); display: flex; align-items: center; justify-content: space-between; width: 100%; @media screen and (max-width: 749px) { border-radius: var(--style-border-radius-inputs); border: none; } } .predictive-search-form__header-inner:focus-within { outline-offset: var(--focus-outline-offset); @media screen and (min-width: 750px) { outline: var(--focus-outline-width) solid var(--color-foreground); } } .predictive-search-form__header { display: flex; position: sticky; top: 0; z-index: var(--layer-heightened); width: 100%; align-items: center; background-color: var(--color-input-background); border: var(--search-border-width) solid var(--color-border); border-radius: var(--style-border-radius-inputs); @media screen and (max-width: 749px) { padding: var(--padding-2xs) var(--padding-sm); } } .predictive-search-form__header:focus-within, .predictive-search-form__header-inner:focus-within, .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) { outline: none; box-shadow: none; border-color: var(--color-border) !important; } input.search-input { border-radius: var(--style-border-radius-inputs); padding-block: var(--padding-sm); font-size: var(--font-size--md); width: 100%; color: var(--color-foreground); padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0; background: transparent; text-overflow: ellipsis; overflow: hidden; outline: none; border: 0; } input.search-input::placeholder { color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text)); } input.search-input, input.search-input:is(:focus, :focus-visible, :focus-within), .predictive-search-form__header *:is(:focus, :focus-visible) { outline: none; box-shadow: none; } input.search-input:hover { background-color: transparent; } .predictive-search__icon { position: absolute; left: var(--margin-xl); top: auto; width: var(--icon-size-lg); height: var(--icon-size-lg); color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60)); @media screen and (min-width: 750px) { left: var(--margin-md); } } .predictive-search__icon > svg { width: var(--icon-size-md); height: var(--icon-size-md); } .predictive-search__reset-button { cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: var(--minimum-touch-target); height: var(--minimum-touch-target); padding: 0; margin-inline-end: var(--margin-md); background: transparent; color: var(--color-foreground); opacity: 0.68; transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out), visibility var(--animation-speed-medium) var(--animation-timing-fade-out); &:hover { color: var(--color-foreground); } &:active { transform: scale(0.9); transition: transform 100ms var(--animation-timing-active); } @media screen and (min-width: 750px) { margin-inline-end: var(--margin-2xs); } } .predictive-search__reset-button[hidden] { opacity: 0; pointer-events: none; visibility: hidden; } .predictive-search__reset-button-icon { display: flex; align-items: center; justify-content: center; width: var(--icon-size-lg); height: var(--icon-size-lg); transition: background-color var(--animation-speed-medium) ease-in-out, transform var(--animation-speed-medium) var(--animation-timing-bounce); border-radius: 50%; &:hover { background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8)); } } .predictive-search__reset-button:active .predictive-search__reset-button-icon { transform: scale(0.85); transition-timing-function: var(--animation-timing-active); transition-duration: 100ms; } .predictive-search__reset-button svg { width: var(--icon-size-md); height: var(--icon-size-md); } .predictive-search__reset-button-text { display: none; } .predictive-search__search-button { margin: auto; z-index: var(--layer-raised); transition: transform var(--animation-speed-medium) var(--animation-timing-bounce), box-shadow var(--animation-speed-medium) var(--animation-timing-hover); transform-origin: center; &:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5)); } &:active { transform: scale(0.97); transition: transform 100ms var(--animation-timing-active); box-shadow: none; } } .predictive-search__close-modal-button { --button-color: var(--color-foreground); --button-background-color: transparent; display: flex; justify-content: center; align-items: center; width: var(--minimum-touch-target); height: var(--minimum-touch-target); margin-inline-start: var(--margin-sm); padding: 0; box-shadow: none; &:active { transform: scale(0.8); transition: transform 100ms var(--animation-timing-active); } .svg-wrapper, svg { width: var(--icon-size-xs); height: var(--icon-size-xs); } } .predictive-search__close-modal-button:hover { --button-color: var(--color-foreground); --button-background-color: transparent; }