.wc-block-product-search { .wc-block-product-search__fields { display: flex; } .wc-block-product-search__field { padding: 6px 8px; line-height: 1.8; flex-grow: 1; } .wc-block-product-search__button { display: flex; align-items: center; text-decoration: none; margin: 0 0 0 6px; border: none; cursor: pointer; background: none; padding: 0 0.5em; color: $gray-700; position: relative; overflow: hidden; border-radius: 0.25em; svg { fill: currentColor; outline: none; .rtl & { transform: rotate(180deg); } } &:active { color: currentColor; } &:disabled, &[aria-disabled="true"] { cursor: default; opacity: 0.3; } &:focus:enabled { background-color: #fff; color: $gray-900; box-shadow: inset 0 0 0 1px $gray-700, inset 0 0 0 2px #fff; outline: 2px solid transparent; outline-offset: -2px; } &:not(:disabled):not([aria-disabled="true"]):hover { background-color: #fff; color: $gray-900; box-shadow: inset 0 0 0 1px $gray-200, inset 0 0 0 2px #fff, 0 1px 1px rgba(25, 30, 35, 0.2); } &:not(:disabled):not([aria-disabled="true"]):active { outline: none; background-color: #fff; color: $gray-900; box-shadow: inset 0 0 0 1px $gray-900, inset 0 0 0 2px #fff; } &[aria-disabled="true"]:focus, &:disabled:focus { box-shadow: none; } } }