.timetable .switch {
  --switch-width: 220px;
  --switch-height: 56px;
  --switch-gap: 6px;
  --switch-radius: 999px;
}
.timetable .switch {
  position: relative;
}
.timetable .switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.timetable .switch {
  width: min(100%, var(--switch-width));
  height: var(--switch-height);
}
.timetable .switch {
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--switch-radius);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--switch-gap);
}
.timetable .switch {
  overflow: hidden;
  isolation: isolate;
}

/**** Options ****/
.timetable .switch__option {
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.timetable .switch__option {
  background: transparent;
  border: 0;
  border-radius: calc(var(--switch-radius) - var(--switch-gap));
}
.timetable .switch__option {
  font-family: 'content-font';
  font-size: 13px;
  color: #111;
}
.timetable .switch__option {
  transition:
    color 0.25s ease,
    transform 0.2s ease,
    opacity 0.25s ease;
}
.timetable .switch__option:hover,
.timetable .switch__option.is-active {
  color: var(--color__2);
}
.timetable .switch__option:active {
  transform: scale(0.98);
}
.timetable .switch__option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.35);
}
.timetable .switch__thumb {
  position: absolute;
  top: var(--switch-gap);
  left: var(--switch-gap);
  z-index: 1;
}
.timetable .switch__thumb {
  pointer-events: none;
}
.timetable .switch__thumb {
  width: calc(50% - var(--switch-gap));
  height: calc(100% - (var(--switch-gap) * 2));
}
.timetable .switch__thumb {
  border-radius: calc(var(--switch-radius) - var(--switch-gap));
  background-color: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.timetable .switch__thumb {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}
.timetable .switch.is-two-active .switch__thumb {
  transform: translateX(100%);
}