.xh-date-input {
  background: var(--xh-input-bg);
  align-items: center;

  & > svg {
    margin: 0 6px;
    flex: none;
  }

  // Size onsen's inner input + label, matching sibling text/number inputs.
  .text-input,
  .text-input__label {
    height: var(--xh-mobile-input-height-px);
    padding: 0 var(--xh-pad-px);
  }

  // Strip native date chrome - Icon.calendar() is the sole affordance.
  .text-input {
    appearance: none;
    -webkit-appearance: none;

    // Center the value vertically within the fixed-height control. On iOS the formatted value sits
    // in ::-webkit-date-and-time-value, which carries a default margin and aligns to the top of the
    // content box - line-height centers it (single line, no vertical padding) without disturbing
    // the horizontal text-align driven by the textAlign prop.
    line-height: var(--xh-mobile-input-height-px);

    // Value sits in this pseudo, which ignores text-align unless inherited.
    &::-webkit-date-and-time-value {
      text-align: inherit;
      margin: 0;
    }

    &:disabled {
      color: var(--xh-text-color-muted);
      opacity: 1;
    }
  }

  &__input {
    flex: 1;
    min-width: 0;
  }

  &__picker-button {
    flex: none;
    margin: 0 6px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  &__clear-button {
    padding-right: 8px;
    padding-left: 0;
    color: var(--xh-text-color-muted) !important;
  }
}