:root{--expandable-search-size-compact:2.2em;--expandable-search-size-expanded:10em;--expandable-search-radius:50em;--expandable-search-icon-size:1.2em;--expandable-search-btn-padding:2px}.expandable-search{position:relative;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expandable-search__input{width:var(--expandable-search-size-compact);height:var(--expandable-search-size-compact);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::-webkit-input-placeholder{opacity:0;color:transparent}.expandable-search__input::-moz-placeholder{opacity:0;color:transparent}.expandable-search__input:-ms-input-placeholder{opacity:0;color:transparent}.expandable-search__input::-ms-input-placeholder{opacity:0;color:transparent}.expandable-search__input::placeholder{opacity:0;color:transparent}.expandable-search__input:hover{background-color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),.1);cursor:pointer}.expandable-search__input:not(:focus):not(.expandable-search__input--has-content){padding:0}.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(var(--expandable-search-btn-padding,2px) + var(--expandable-search-size-compact));padding-bottom:0;outline:none;box-shadow:var(--shadow-md),0 0 0 2px var(--color-primary);color:var(--color-contrast-higher);cursor:auto;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.expandable-search__input:focus:not([class^=padding-]):not([class*=" padding-"]),.expandable-search__input.expandable-search__input--has-content:not([class^=padding-]):not([class*=" padding-"]){padding-left:var(--space-sm)}.expandable-search__input:focus::-webkit-input-placeholder,.expandable-search__input.expandable-search__input--has-content::-webkit-input-placeholder{opacity:1;color:var(--color-contrast-low)}.expandable-search__input:focus::-moz-placeholder,.expandable-search__input.expandable-search__input--has-content::-moz-placeholder{opacity:1;color:var(--color-contrast-low)}.expandable-search__input:focus:-ms-input-placeholder,.expandable-search__input.expandable-search__input--has-content:-ms-input-placeholder{opacity:1;color:var(--color-contrast-low)}.expandable-search__input:focus::-ms-input-placeholder,.expandable-search__input.expandable-search__input--has-content::-ms-input-placeholder{opacity:1;color:var(--color-contrast-low)}.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:var(--expandable-search-btn-padding,2px);right:var(--expandable-search-btn-padding,2px);width:calc(var(--expandable-search-size-compact) - var(--expandable-search-btn-padding,2px)*2);height:calc(var(--expandable-search-size-compact) - var(--expandable-search-btn-padding,2px)*2);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:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),.1)}.expandable-search__btn:focus{outline:none;background-color:hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),.15)}