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

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

  // Read-only display of the formatted value - tap to open the calendar picker.
  &__display {
    flex: 1;
    min-width: 0;
    height: var(--xh-mobile-input-height-px);
    line-height: var(--xh-mobile-input-height-px);
    padding: 0 var(--xh-pad-px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

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

  &__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;
  }

  &__picker-dialog {
    // No title provided - suppress the empty title bar rendered by Dialog.
    .xh-dialog__title:empty {
      display: none;
    }

    // Theme react-day-picker to match the app via its published CSS custom props.
    .rdp-root {
      --rdp-accent-color: var(--xh-accent-color);
      --rdp-accent-background-color: var(--xh-bg-alt);
      --rdp-today-color: var(--xh-accent-color);
    }
  }
}