1. .ToggleDisabled,
    
  2. .ToggleOn,
    
  3. .ToggleOff {
    
  4.   background: var(--color-button-background);
    
  5.   border: none;
    
  6.   border-radius: 0.25rem;
    
  7.   padding: 0;
    
  8.   flex: 0 0 auto;
    
  9. }
    
  10. 
    
  11. .ToggleContent {
    
  12.   display: inline-flex;
    
  13.   align-items: center;
    
  14.   border-radius: 0.25rem;
    
  15.   padding: 0.25rem;
    
  16. }
    
  17. 
    
  18. .ToggleOff {
    
  19.   border: none;
    
  20.   background: var(--color-button-background);
    
  21.   color: var(--color-button);
    
  22. }
    
  23. .ToggleOff:hover {
    
  24.   color: var(--color-button-hover);
    
  25. }
    
  26. 
    
  27. .ToggleOn,
    
  28. .ToggleOn:active {
    
  29.   color: var(--color-button-active);
    
  30.   outline: none;
    
  31. }
    
  32. 
    
  33. .ToggleOn:focus,
    
  34. .ToggleOff:focus,
    
  35. .ToggleContent:focus {
    
  36.   outline: none;
    
  37. }
    
  38. 
    
  39. .ToggleOn:focus > .ToggleContent,
    
  40. .ToggleOff:focus > .ToggleContent {
    
  41.   background: var(--color-button-background-focus);
    
  42. }
    
  43. 
    
  44. .ToggleDisabled {
    
  45.   background: var(--color-button-background);
    
  46.   color: var(--color-button-disabled);
    
  47.   cursor: default;
    
  48. }