@layer base {
  .toggleGroup {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    align-items: center;
    position: relative;
    width: fit-content;
  }
  
  .toggleGroup[data-orientation="horizontal"] {
    flex-direction: row;
  }
  
  .toggleGroup[data-orientation="vertical"] {
    flex-direction: column;
    align-items: stretch;
  }
  
  .toggleGroup[data-type="single"] {
    position: relative;
  }
  
  .toggleGroup[data-type="multiple"] {
    position: relative;
  }
  
  .toggleGroup:has(.toggle-size-sm) {
    gap: var(--spacing-1);
  }
  
  .toggleGroup:has(.toggle-size-md) {
    gap: var(--spacing-2);
  }
  
  .toggleGroup:has(.toggle-size-lg) {
    gap: var(--spacing-3);
  }
}