/* React Native Web sizes the visual Switch from its explicit 40x20 dimensions, while a
   min-size style stretches the same root. Keep the visual track at 40x20 and retain a
   centred 44x44 checkbox hit target. */
div:has(> input[role="switch"]) {
  flex-shrink: 0;
  height: 20px;
  min-height: 20px;
  min-width: 40px;
  overflow: visible;
  width: 40px;
}

div:has(> input[role="switch"]) > input[role="switch"] {
  bottom: auto;
  height: 44px;
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}

html body [data-owncadence-time-column],
html body [data-owncadence-time-frame],
html body [data-owncadence-time-input] {
  min-width: 0;
}

html body [data-owncadence-time-frame] {
  overflow: hidden;
}

html body [data-owncadence-time-frame]:focus-within {
  border-color: #176b55;
  box-shadow: inset 0 0 0 1px #176b55;
}

html body [data-owncadence-time-input] {
  color-scheme: light;
  width: 100%;
}