.toggle-group {
  background: var(--color-bg-tertiary);
  padding: 4px;
  border-radius: 50px;
  display: inline-flex;
  gap: 4px;

  .toggle-group-item {
    color: var(--color-text-tertiary);
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;

    &.active {
      background: var(--color-bg-primary);
      color: var(--color-text-primary);
      box-shadow: 0 4px 10px var(--color-shadow-lg-01 );
      font-weight: var(--weight-medium);
    }
  }
}