.segmented-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background-color: var(--secondary-base-color-code);
  box-shadow: inset 2px 2px 6px rgb(var(--main-color-rgb) / 0.12), inset -2px -2px 6px rgb(var(--primary-base-color-rgb) / 0.9);
}

.segmented-toggle::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: calc(50% - 0.25rem);
  height: calc(100% - 0.5rem);
  border-radius: 999px;
  background-color: var(--primary-base-color-code);
  box-shadow: 0 6px 12px rgb(var(--main-color-rgb) / 0.12);
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.segmented-toggle[data-mode="operating"]::before {
  transform: translateX(100%);
}

.segmented-toggle__button {
  position: relative;
  z-index: 1;
  border: none;
  background-color: transparent;
  color: rgb(var(--main-color-rgb) / 0.7);
  font-size: calc(var(--font-size-normal) - 0.2rem);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 240ms ease;
}

.segmented-toggle__button.is-active {
  color: var(--main-color-code);
}

@media screen and (max-width: 959px) {
  .segmented-toggle {
    gap: 0.2rem;
    padding: 0.2rem;
  }

  .segmented-toggle::before {
    top: 0.2rem;
    left: 0.2rem;
    width: calc(50% - 0.2rem);
    height: calc(100% - 0.4rem);
  }

  .segmented-toggle__button {
    font-size: calc(var(--font-size-normal) - 0.25rem);
    padding: 0.32rem 0.75rem;
  }
}