/* 食事・排泄で共通使用するスロット外観。選択データと表示文字だけを各画面で差し替える。 */
.food-controller,
.kot-controller {
  --slot-wheel-panel: #fffdf8;
  --slot-wheel-line: #d3c0b3;
  --slot-wheel-text: #36261f;
  --slot-wheel-muted: #927e73;
}

.food-wheel,
.kot-wheel {
  position: relative;
  width: 100%;
  height: 40px;
  padding-block: 11px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  border: 2px solid var(--slot-wheel-line);
  border-radius: 4px;
  background:
    linear-gradient(to bottom, rgba(31, 41, 55, .24), rgba(247, 240, 232, .1) 13px, transparent 14px),
    linear-gradient(to top, rgba(31, 41, 55, .24), rgba(247, 240, 232, .1) 13px, transparent 14px),
    var(--slot-wheel-panel);
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.food-wheel::-webkit-scrollbar,
.kot-wheel::-webkit-scrollbar { display: none; }

.food-controller .food-wheel__option,
.kot-controller .kot-wheel__option {
  width: 100%;
  height: 18px;
  display: block;
  padding: 0;
  scroll-snap-align: center;
  border: 0;
  border-radius: 0;
  color: var(--slot-wheel-muted);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}

.food-controller .food-wheel__option.is-selected,
.kot-controller .kot-wheel__option.is-selected {
  color: var(--slot-wheel-text);
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 900;
}

.food-wheel[aria-disabled="true"],
.kot-wheel[aria-disabled="true"] {
  overflow-y: hidden;
  pointer-events: none;
  opacity: .38;
}