:root{--expandable-search-size-compact: 2.2em;--expandable-search-size-expanded: 10em;--expandable-search-radius: 50em;--expandable-search-icon-size: 1.2em}.expandable-search{position:relative;display:inline-block;user-select:none}.expandable-search__input{width:var(--expandable-search-size-compact);height:var(--expandable-search-size-compact);padding:0;color:transparent;overflow:hidden;border-radius:var(--expandable-search-radius);transition:width .3s var(--ease-out),box-shadow .3s,background-color .3s}.expandable-search__input::placeholder{opacity:0;color:transparent}.expandable-search__input:hover{background-color:rgba(var(--color-contrast-higher), 0.1);cursor:pointer}.expandable-search__input:focus,.expandable-search__input.expandable-search__input--has-content{background-color:var(--color-bg);width:var(--expandable-search-size-expanded);padding-top:0;padding-right:calc(4px + var(--expandable-search-size-compact));padding-bottom:0;padding-left:var(--space-sm);outline:none;box-shadow:var(--shadow-md),0 0 0 2px var(--color-primary);color:var(--color-contrast-higher);cursor:auto;user-select:auto}.expandable-search__input:focus::placeholder,.expandable-search__input.expandable-search__input--has-content::placeholder{opacity:1;color:var(--color-contrast-low)}.expandable-search__input:focus+.expandable-search__btn{pointer-events:auto}.expandable-search__input::-webkit-search-decoration,.expandable-search__input::-webkit-search-cancel-button,.expandable-search__input::-webkit-search-results-button,.expandable-search__input::-webkit-search-results-decoration{display:none}.expandable-search__btn{position:absolute;display:flex;top:2px;right:2px;width:calc(var(--expandable-search-size-compact) - 4px);height:calc(var(--expandable-search-size-compact) - 4px);border-radius:var(--expandable-search-radius);z-index:1;pointer-events:none;transition:background-color .3s}.expandable-search__btn .icon{display:block;margin:auto;height:var(--expandable-search-icon-size);width:var(--expandable-search-icon-size)}.expandable-search__btn:hover{background-color:rgba(var(--color-contrast-higher), 0.1)}.expandable-search__btn:focus{outline:none;background-color:rgba(var(--color-primary), 0.15)}/*# sourceMappingURL=1_expandable-search.css.map */