/* theme-mode-style */
.mode + .container {
  --color-pure: #000;
  --color-primary: #e8e8e8;
  --color-secondary: #212121;
  --muted: #b8b8b8;
}
.mode:checked + .container {
  --color-pure: #fff;
  --color-primary: #212121;
  --color-secondary: #fff;
  --muted: #383838;
}
.container {
  background-color: var(--color-secondary);
  position: absolute;
  width: 100%;
  height: 110%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.container .theme {
  color: var(--color-secondary);
  background-color: var(--color-primary);
  position: relative;
  cursor: pointer;
  z-index: 9;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid var(--muted);
  border-radius: calc(var(--round) - var(--p-y));
  margin-left: calc(var(--p-x) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  transition: background-color 0.25s linear;
}
.container .theme:hover {
  background-color: var(--muted);
}
.container .theme::before {
  content: "";
  position: absolute;
  left: calc(var(--p-x) * -1);
  width: 1px;
  height: 100%;
  background-color: var(--muted);
}
.container .theme span {
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0.125rem;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
}
.mode:checked + .container .theme span.light,
.mode + .container .theme span.dark {
  display: none;
}
.mode + .container .theme span.light,
.mode:checked + .container .theme span.dark {
  display: flex;
}
.container .theme svg {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: currentColor;
  fill: none;
  height: 22px;
  width: 22px;
}

/* main style */
.wrap {
  --round: 10px;
  --p-x: 8px;
  --p-y: 4px;
  --w-label: 100px;
  display: flex;
  align-items: center;
  padding: var(--p-y) var(--p-x);
  position: relative;
  background: var(--color-primary);
  border-radius: var(--round);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  top: 0;
  z-index: 1;
}

.wrap input {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
  display: none;
  visibility: hidden;
}

.label {
  cursor: pointer;
  outline: none;
  font-size: 0.875rem;
  letter-spacing: initial;
  font-weight: 500;
  color: var(--color-secondary);
  background: transparent;
  padding: 12px 16px;
  width: var(--w-label);
  min-width: var(--w-label);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.25s ease;
  outline-offset: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.label span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.wrap input[class*="rd-"]:checked + label {
  color: var(--color-pure);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  transform-origin: 0 0 0;
  height: 100%;
  width: var(--w-label);
  z-index: 0;
  transition: transform 0.5s cubic-bezier(0.33, 0.83, 0.99, 0.98);
}
.bar::before,
.bar::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  background: var(--color-secondary);
}
.bar::before {
  top: 0;
  border-radius: 0 0 9999px 9999px;
}
.bar::after {
  bottom: 0;
  border-radius: 9999px 9999px 0 0;
}

.slidebar {
  position: absolute;
  height: calc(100% - (var(--p-y) * 4));
  width: var(--w-label);
  border-radius: calc(var(--round) - var(--p-y));
  background: var(--muted);
  transform-origin: 0 0 0;
  z-index: 0;
  transition: transform 0.5s cubic-bezier(0.33, 0.83, 0.99, 0.98);
}

.rd-1:checked ~ .bar,
.rd-1:checked ~ .slidebar,
.rd-1 + label:hover ~ .slidebar {
  transform: translateX(0) scaleX(1);
}
.rd-2:checked ~ .bar,
.rd-2:checked ~ .slidebar,
.rd-2 + label:hover ~ .slidebar {
  transform: translateX(100%) scaleX(1);
}
.rd-3:checked ~ .bar,
.rd-3:checked ~ .slidebar,
.rd-3 + label:hover ~ .slidebar {
  transform: translateX(200%) scaleX(1);
}