.dateComponentPicker {
  display: inline-block;
  text-align: center;
  vertical-align: inherit;
  position: relative;
}
.dateComponentPicker:global(.carbon) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.carbon) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.carbon) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.carbon) .focusBackground {
  width: calc(100% - 2 * 0.25rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.carbon):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.carbon):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.carbon):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.carbon)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0rem;
  height: inherit;
  opacity: inherit;
  background-color: inherit;
}
.dateComponentPicker:global(.carbon):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.carbon):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.carbon):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.cobalt) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.cobalt) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.cobalt) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.cobalt) .focusBackground {
  width: calc(100% - 2 * 0.25rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.cobalt):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.cobalt):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.cobalt):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.cobalt)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0rem;
  height: inherit;
  opacity: inherit;
  background-color: inherit;
}
.dateComponentPicker:global(.cobalt):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.cobalt):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.cobalt):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.cobalt):global(.night) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.cobalt):global(.night) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.cobalt):global(.night) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.cobalt):global(.night) .focusBackground {
  width: calc(100% - 2 * 0.25rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.cobalt):global(.night):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.cobalt):global(.night):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.cobalt):global(.night):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.cobalt):global(.night)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0rem;
  height: inherit;
  opacity: inherit;
  background-color: inherit;
}
.dateComponentPicker:global(.cobalt):global(.night):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.cobalt):global(.night):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.cobalt):global(.night):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.copper) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.copper) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.copper) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.copper) .focusBackground {
  width: calc(100% - 2 * 0.25rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.copper):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.copper):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.copper):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.copper)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0rem;
  height: inherit;
  opacity: inherit;
  background-color: inherit;
}
.dateComponentPicker:global(.copper):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.copper):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.copper):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.copper):global(.night) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.copper):global(.night) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.copper):global(.night) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.copper):global(.night) .focusBackground {
  width: calc(100% - 2 * 0.25rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.copper):global(.night):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.copper):global(.night):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.copper):global(.night):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.copper):global(.night)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0rem;
  height: inherit;
  opacity: inherit;
  background-color: inherit;
}
.dateComponentPicker:global(.copper):global(.night):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.copper):global(.night):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.copper):global(.night):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.electro) {
  padding: 0rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.electro) {
  padding: 0rem 0rem 0rem 0rem;
}
.dateComponentPicker:global(.electro) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.electro) .focusBackground {
  width: calc(100% - 2 * 0rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.electro):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.electro):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.electro):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.electro)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0rem;
  height: inherit;
  opacity: inherit;
  background-color: inherit;
}
.dateComponentPicker:global(.electro):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.electro):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.electro):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.gallium) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.gallium) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.gallium) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.gallium) .focusBackground {
  width: calc(100% - 2 * 0.375rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.gallium):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.gallium):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.gallium):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.gallium)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.125rem;
  height: 0.875rem;
  opacity: 0.4;
  background-color: #ffffff;
}
.dateComponentPicker:global(.gallium):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.gallium):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.gallium):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.gallium):global(.night) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.gallium):global(.night) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.gallium):global(.night) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.gallium):global(.night) .focusBackground {
  width: calc(100% - 2 * 0.375rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.gallium):global(.night):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.gallium):global(.night):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.gallium):global(.night):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.gallium):global(.night)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.125rem;
  height: 0.875rem;
  opacity: 0.4;
  background-color: #ffffff;
}
.dateComponentPicker:global(.gallium):global(.night):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.gallium):global(.night):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.gallium):global(.night):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.silicon) {
  padding: 0.25rem 0.25rem 0.25rem 0.375rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.silicon) {
  padding: 0.25rem 0.375rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.silicon) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.silicon) .focusBackground {
  width: calc(100% - 2 * 0.375rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.silicon):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.silicon):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.silicon):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.silicon)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.125rem;
  height: 0.875rem;
  opacity: 0.4;
  background-color: #ffffff;
}
.dateComponentPicker:global(.silicon):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.silicon):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.silicon):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.silicon):global(.night) {
  padding: 0.25rem 0.25rem 0.25rem 0.375rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.silicon):global(.night) {
  padding: 0.25rem 0.375rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.silicon):global(.night) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.silicon):global(.night) .focusBackground {
  width: calc(100% - 2 * 0.375rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.silicon):global(.night):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.silicon):global(.night):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.silicon):global(.night):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.silicon):global(.night)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.125rem;
  height: 0.875rem;
  opacity: 0.4;
  background-color: #ffffff;
}
.dateComponentPicker:global(.silicon):global(.night):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.silicon):global(.night):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.silicon):global(.night):nth-child(-n + 2)::before {
  content: "";
}
.dateComponentPicker:global(.titanium) {
  padding: 0.25rem;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.titanium) {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.dateComponentPicker:global(.titanium) .active::before {
  background-color: transparent;
  background-image: none;
}
.dateComponentPicker:global(.titanium) .focusBackground {
  width: calc(100% - 2 * 0.25rem );
  z-index: 0;
}
:global(.spotlight-input-key) .dateComponentPicker:global(.titanium):global(.spottable):focus .focusBackground,
:global(.spotlight-input-mouse) .dateComponentPicker:global(.titanium):global(.spottable):focus .focusBackground {
  display: block;
}
:global(.spotlight-input-touch) .dateComponentPicker:global(.titanium):global(.spottable):active .focusBackground {
  display: block;
}
.dateComponentPicker:global(.titanium)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0rem;
  height: inherit;
  opacity: inherit;
  background-color: inherit;
}
.dateComponentPicker:global(.titanium):nth-child(n + 2)::before {
  content: "";
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.titanium):nth-child(n + 3)::before {
  content: none;
}
:global(.enact-locale-right-to-left) .dateComponentPicker:global(.titanium):nth-child(-n + 2)::before {
  content: "";
}
