[data-oms-date-control] {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  vertical-align: middle;
}

[data-oms-date-control] > [data-oms-date-source][hidden] { display: none !important; }
[data-oms-date-control] > [data-oms-date-picker],
[data-oms-date-control] > [data-oms-date-range-display] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color-scheme: dark;
}
[data-oms-date-range-display] { padding-right: 34px !important; cursor: pointer; }
[data-oms-date-legacy] { display: block; width: 100%; padding-top: 3px; font-size: 12px; font-weight: normal; color: var(--muted, #60728a); overflow-wrap: anywhere; }
[data-oms-date-legacy][hidden] { display: none !important; }

[data-oms-date-open] {
  position: absolute;
  z-index: 1;
  inset: 1px 1px 1px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #8d9baa);
  cursor: pointer;
}

[data-oms-date-open] svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

[data-oms-date-open]:hover,
[data-oms-date-open]:focus-visible {
  color: var(--text-strong, #e7edf4);
  background: rgba(128, 128, 128, .12);
}

body.theme-light [data-oms-date-control] > input[data-oms-date-picker] {
  color-scheme: light;
}

[data-oms-date-open]:disabled {
  pointer-events: none;
  opacity: .45;
}

[data-oms-date-range] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: max-content;
  max-width: min(380px, 90vw);
  padding: 12px;
  border: 1px solid var(--border, #354253);
  border-radius: 8px;
  background: var(--panel-solid, #172232);
  box-shadow: 0 8px 24px #0003;
}

[data-oms-date-range][hidden] { display: none !important; }
[data-oms-date-range] > label { display: grid; gap: 5px; }
[data-oms-date-range] input { width: 155px; color-scheme: dark; }
body.theme-light [data-oms-date-range] input { color-scheme: light; }

@media print {
  [data-oms-date-open], [data-oms-date-range] { display: none !important; }
}