.range {
  // `__first-input` / `__last-input` / `__*-date` land on an `Input` /
  // `DatePicker` root. The doubled root class keeps Stylable's class count so
  // these border/z-index rules stay above Input's own root state rules
  // (`:hover`, `:status(...)`), which sit at the same two-class specificity.
  &#{&}--focused-element-position-first &__first-input,
  &#{&}--focused-element-position-first &__first-date {
    z-index: 1;
    border-right-width: 1px;
  }

  &#{&}--focused-element-position-last &__first-input,
  &#{&}--focused-element-position-last &__first-date {
    border-right-width: 0px;
  }

  &#{&}--focused-element-position-last &__last-input,
  &#{&}--focused-element-position-last &__last-date {
    z-index: 1;
    border-left-width: 1px;
  }

  &__label {
    margin-bottom: 6px;
  }

  &__input-wrapper {
    display: flex;
  }

  // `box-sizing: content-box` was in the Stylable sheet but never applied: these
  // classes land on an `Input` root, whose own `box-sizing: border-box` came
  // later in the Stylable bundle and won the tie. The migrated sheet is appended
  // after that bundle, so keeping the declaration would flip the box model.
  &__first-input,
  &__last-input {
    width: 50%;
  }

  &--mobile &__input-wrapper {
    flex-direction: column;
    gap: var(--wds-space-200, 12px);
  }

  &--mobile &__first-input,
  &--mobile &__last-input {
    width: auto;
  }

  // Same foreign-root reason as above: must outrank the
  // `--focused-element-position-last` rule, which carries three classes.
  &#{&}--mobile#{&}--focused-element-position-last &__first-input,
  &#{&}--mobile#{&}--focused-element-position-last &__first-date {
    border-right-width: 1px;
  }
}