.mobile-picker {
  --overlay-color: rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.8);
  --spacing-xs: 6px;
  --picker-overlay-border-color: #e6ebf0;
  position: relative;
  height: clamp(120px, var(--picker-container-height, 273px), 100vmax);
}

.mobile-picker .mobile-picker-view-container {
  display: flex;
  height: inherit;
}

.mobile-picker .mobile-picker-view-container .mobile-picker-view {
  flex-grow: 1;
  position: relative;
  height: inherit;
  overflow: hidden;
  user-select: none;
  touch-action: none;

  --picker-transit-duration: 0;
  --picker-transit-y: 0ms;
}

.mobile-picker
  .mobile-picker-view-container
  .mobile-picker-view
  .mobile-picker-view-item-container {
  position: absolute;
  inset-inline: 0;
  top: calc(50% - var(--picker-item-height) / 2);
  transform: translateY(var(--picker-transit-y));
  transition-timing-function: ease-out;
  transition-duration: var(--picker-transit-duration);
  transition-property: transform;
  will-change: transform;
}

.mobile-picker
  .mobile-picker-view-container
  .mobile-picker-view
  .mobile-picker-view-item-container
  .mobile-picker-view-item {
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
  padding-block: var(--spacing-xs);
}

.mobile-picker .mobile-picker-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.mobile-picker .mobile-picker-overlay::before {
  content: "";
  display: block;
  flex-grow: 1;
  background: linear-gradient(0, var(--overlay-color));
}

.mobile-picker .mobile-picker-overlay::after {
  content: "";
  display: block;
  flex-grow: 1;
  background: linear-gradient(180deg, var(--overlay-color));
}

.mobile-picker .mobile-picker-overlay .mobile-picker-overlay-mid {
  height: var(--picker-item-height);
  border-top: 1px solid var(--picker-overlay-border-color);
  border-bottom: 1px solid var(--picker-overlay-border-color);
}