.wc-block-components-product-button.show-only-icon
  .wc-block-components-product-button__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-block-components-product-button.show-only-icon button::before {
  content: "\FF0B";
  font-size: inherit;
  color: currentColor;
  font-weight: inherit;
}

.wc-block-components-product-button.show-only-icon a::before {
  content: "\10312";
  font-size: inherit;
  color: currentColor;
  font-weight: inherit;
}

.block-editor-block-list__block
  .wc-block-components-product-button.show-only-icon
  button::before,
.block-editor-block-list__block
  .wc-block-components-product-button.show-only-icon
  a::before {
  font-size: 22px;
  font-weight: inherit;
}

.wc-block-components-product-button.show-only-icon button > *,
.wc-block-components-product-button.show-only-icon a > * {
  position: absolute;
  right: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  background: #ffffff;
  color: #122940;
  font-size: 12px;
  box-shadow: 0px 1px 0px 0px #00000012;
  font-weight: 500;
  padding: 5px 8px;
  border-radius: 2px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  z-index: 2;
}

.wc-block-components-product-button.show-only-icon button:hover > *,
.wc-block-components-product-button.show-only-icon a:hover > * {
  visibility: visible;
  opacity: 1;
}

.wc-block-components-product-button.show-only-icon button::after {
  font-size: 70%;
  font-weight: inherit;
  margin: 0 !important;
}

.wc-block-components-product-button.show-only-icon button.loading::before {
  display: none;
}

/** Editor */
.block-editor-block-list__block
  .wc-block-components-product-button.show-only-icon
  button,
.block-editor-block-list__block
  .wc-block-components-product-button.show-only-icon
  a {
  font-size: 0 !important;
}

.wc-block-components-product-button.show-only-icon .components-disabled,
.wc-block-components-product-button.show-only-icon .wp-block-button,
.wc-block-components-product-button.show-only-icon
  .wc-block-components-product-button__button {
  width: 100%;
  height: 100%;
}
