.wdc-input-clearable.wdc-input-has-value {
  --wdc-input-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23fff' stroke='%23cbd5e1'/%3E%3Cpath d='M6.25 6.25l5.5 5.5m0-5.5l-5.5 5.5' fill='none' stroke='%23475569' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  padding-right: 38px !important;
  background-image: var(--wdc-input-clear-icon), var(--wdc-input-base-bg-image, none) !important;
  background-position: right 10px center, var(--wdc-input-base-bg-position, 0% 0%) !important;
  background-size: 18px 18px, var(--wdc-input-base-bg-size, auto) !important;
  background-repeat: no-repeat, var(--wdc-input-base-bg-repeat, repeat) !important;
}

.wdc-input-clearable.wdc-input-has-value.wdc-input-clear-hover {
  --wdc-input-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23fff1f2' stroke='%23fda4af'/%3E%3Cpath d='M6.25 6.25l5.5 5.5m0-5.5l-5.5 5.5' fill='none' stroke='%23be123c' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  cursor: pointer;
}

.wdc-input-clearable::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.wdc-input-clearable::-ms-clear,
.wdc-input-clearable::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

@media (pointer: coarse) {
  .wdc-input-clearable.wdc-input-has-value {
    padding-right: 42px !important;
    background-position: right 11px center, var(--wdc-input-base-bg-position, 0% 0%) !important;
    background-size: 20px 20px, var(--wdc-input-base-bg-size, auto) !important;
  }
}