.date-picker-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
}
.date-picker-dismiss { position: absolute; inset: 0; }
.date-picker {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(256 * var(--px));
  background: #efeff4;
  color: #3d4145;
}
.date-picker-toolbar {
  position: relative;
  height: calc(44 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f8;
  border-top: calc(.5 * var(--px)) solid #dedede;
}
.date-picker-toolbar h2 {
  margin: 0;
  font-size: calc(16 * var(--px));
  font-weight: 500;
}
.date-picker-done {
  position: absolute;
  right: 0;
  height: 100%;
  padding: 0 calc(12 * var(--px));
  background: none;
  color: #04be02;
  font-size: calc(16 * var(--px));
}
.date-picker-body { position: relative; height: calc(212 * var(--px)); overflow: hidden; }
.date-picker-columns {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: calc(210 * var(--px));
  margin-top: calc(1 * var(--px));
  -webkit-mask-image: linear-gradient(transparent, #000 36%, #000 64%, transparent);
  mask-image: linear-gradient(transparent, #000 36%, #000 64%, transparent);
}
.date-picker-wheel {
  flex: 0 0 calc(36 * var(--px));
  height: 100%;
  padding: calc(90 * var(--px)) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  outline: none;
}
.date-picker-wheel::-webkit-scrollbar { display: none; }
.date-picker-wheel.is-year { flex-basis: calc(64 * var(--px)); }
.date-picker-option {
  height: calc(30 * var(--px));
  line-height: calc(30 * var(--px));
  text-align: center;
  scroll-snap-align: center;
  font-size: calc(20 * var(--px));
  font-weight: 500;
  color: #8b8b90;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.date-picker-option[aria-selected="true"] { color: #3d4145; font-weight: 600; }
.date-picker-divider {
  flex: 0 0 calc(12 * var(--px));
  align-self: center;
  text-align: center;
  font-size: calc(20 * var(--px));
  font-weight: 600;
}
.date-picker-selection {
  position: absolute;
  top: calc(91 * var(--px));
  width: 100%;
  height: calc(30 * var(--px));
  border-top: calc(.5 * var(--px)) solid #e5e5e9;
  border-bottom: calc(.5 * var(--px)) solid #e5e5e9;
  pointer-events: none;
}