/* wcsearch-o-i
overlay, icon only.
add smooth animation */

/* overlay */
.header-constrained .wc-search-is-overlay .search-overlay-wrapper::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.header-constrained .wc-search-is-overlay .search-overlay-wrapper:has(.wp-block-search:not(.wp-block-search__searchfield-hidden))::before{
  opacity: 1;
  pointer-events: auto;
} 

    
/* mobile search block wrapper, offsetting the extra 8px margin for showing outline.*/
.header-constrained .wc-search-is-overlay .wp-block-group:has(>.wp-block-search){
    position: absolute;
    right: -8px;
} 

.header-constrained .wc-search-is-overlay .wp-block-group:has(>.wp-block-search:not(.wp-block-search__searchfield-hidden)){
    position:fixed;
    top: calc(var(--wp-admin--admin-bar--height,0px) + 5rem);
    right: 50%;
    transform: translate(50%, 0);
    padding: 10px 4px 10px 10px;
    background-color: var(--bg-primary);
    border: 1px solid var(--bg-primary);
    border-radius: 10px;
}

/* search block button mimic svg, margin for outline to be seen */
.header-constrained .wc-search-is-overlay .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__button{
    margin: 8px 8px 8px 8px;
    outline-offset: -2px;
}

/* search input */
.header-constrained .wc-search-is-overlay .wp-block-search .wp-block-search__input{
    border: 0 solid;
}

.header-constrained .wc-search-is-overlay .wp-block-search .wp-block-search__input:focus-visible{
    outline-width: 1px;
} 

/* remove closing animation and only keep opening width changing transition */
.header-constrained .wc-search-is-overlay .wp-block-search .wp-block-search__input{
    padding-right: 10px;
    padding-left: 16px;
    transition-duration: 300ms;
    background-color: var(--bg-primary);
}

.header-constrained .wc-search-is-overlay .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__input{
    transition-duration: 0ms;
}

/* search svg inside search block */
.header-constrained .wc-search-is-overlay .wp-block-search.wp-block-search__searchfield-hidden + .wp-block-group{
    opacity: 0;
    /* transition: opacity 10ms ease-out 0ms; */
}

.header-constrained .wc-search-is-overlay .wp-block-search + .wp-block-group{
    opacity: 1;
}