.segment-control {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  background-color: light-dark(var(--color-gray-100), var(--color-zinc-700));
  border-radius: 9999px;
  box-shadow: inset 0 1px 2px 0
    light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  border: 1px solid light-dark(var(--color-gray-300), var(--color-zinc-600));
}

.segment-control__item {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: light-dark(var(--color-gray-700), var(--color-zinc-300));
  text-decoration: none;
  transition: all 0.15s ease;
  position: relative;

  &:hover {
    background-color: light-dark(var(--color-white), var(--color-zinc-800));
    color: light-dark(var(--color-gray-900), var(--color-white));
    box-shadow: 0 1px 2px 0 light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px
      light-dark(var(--color-blue-500), var(--color-blue-400));
  }
}

.segment-control__item--active {
  background-color: light-dark(var(--color-white), var(--color-zinc-800));
  color: light-dark(var(--color-gray-900), var(--color-white));
  font-weight: 700;
  box-shadow: 0 1px 2px 0 light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
  z-index: 10;
}