.readOnly > div {
  background: var(--ds-color-neutral-surface-tinted);
  border-color: var(--ds-color-neutral-border-subtle);
  color: var(--ds-color-neutral-text-default);
}

.optionContent {
  display: flex;
  flex-direction: column;
}

.showCaretsWithoutClear input {
  background-image:
    linear-gradient(
      45deg,
      var(--_dsc-input-diagonal-1),
      var(--_dsc-input-diagonal-2),
      var(--_dsc-input-diagonal-3),
      var(--_dsc-input-diagonal-4)
    ),
    linear-gradient(
      -45deg,
      var(--_dsc-input-diagonal-1),
      var(--_dsc-input-diagonal-2),
      var(--_dsc-input-diagonal-3),
      var(--_dsc-input-diagonal-4)
    );
  background-position: calc(100% - 1.2em + var(--dsc-input-stroke-width)), calc(100% - 0.8em);
  background-repeat: no-repeat;
  background-size: 0.4em 0.4em;
  padding-inline-end: 2.4em;
}

.showCaretsWithoutClear:has(:popover-open) input {
  background-image:
    linear-gradient(
      -45deg,
      var(--_dsc-input-diagonal-1),
      var(--_dsc-input-diagonal-2),
      var(--_dsc-input-diagonal-3),
      var(--_dsc-input-diagonal-4)
    ),
    linear-gradient(
      45deg,
      var(--_dsc-input-diagonal-1),
      var(--_dsc-input-diagonal-2),
      var(--_dsc-input-diagonal-3),
      var(--_dsc-input-diagonal-4)
    );
}
