/*
Toggle

A two-state button (aria-pressed). Off it is quiet (transparent, or
outlined); on it takes the selected-item fill. Pressed and hover change
color only; the box never changes size.

  .toggle                       the button
  .toggle.is-outline            bordered
  .toggle.is-sm | is-lg         size (md has no class)
  .toggle[data-state]           on | off
*/

@layer components {

.toggle {
  position:        relative;
  display:         inline-flex;
  flex:            none;
  align-items:     center;
  justify-content: center;
  gap:             var(--control-gap);
  min-width:       var(--control-height);
  height:          var(--control-height);
  margin:          0;
  padding:         0 calc(var(--control-padding-x) / 2);
  border:          var(--control-border-width) solid transparent;
  border-radius:   var(--radius-control);
  background:      transparent;
  color:           var(--ink);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--tracking-ui);
  text-transform:  var(--case-ui);
  line-height:     1;
  white-space:     nowrap;
  cursor:          pointer;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
  transition:      background-color var(--duration-fast) var(--ease-out),
                   color var(--duration-fast) var(--ease-out),
                   box-shadow var(--duration-fast) var(--ease-out);
}

.toggle svg {
  flex:           none;
  width:          var(--icon-size);
  height:         var(--icon-size);
  pointer-events: none;
}

.toggle:hover:not(:disabled) {
  background: var(--bg-soft);
  color:      var(--ink);
}

.toggle:active:not(:disabled) {
  background: color-mix(in oklab, var(--bg-muted), var(--ink) 8%);
}

.toggle:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.toggle[data-state="on"] {
  background: var(--item-selected);
  color:      var(--item-selected-ink);
}

/* On and hovered reads deeper than on, and off and hovered lighter than on,
   so the hover never looks like the other state. */
.toggle[data-state="on"]:hover:not(:disabled) {
  background: color-mix(in oklab, var(--item-selected), var(--ink) 7%);
  color:      var(--item-selected-ink);
}

.toggle[data-state="on"]:active:not(:disabled) {
  background: color-mix(in oklab, var(--item-selected), var(--ink) 14%);
}

.toggle.is-outline {
  border-color: var(--control-border);
  background:   var(--control-bg);
  box-shadow:   var(--control-shadow);
}

.toggle.is-outline:focus-visible {
  box-shadow: var(--focus-ring);
}

.toggle.is-outline[data-state="on"] {
  background: var(--item-selected);
  color:      var(--item-selected-ink);
}

.toggle.is-sm {
  min-width: var(--control-height-sm);
  height:    var(--control-height-sm);
  padding:   0 calc(var(--control-padding-x-sm) / 2);
  font-size: var(--text-ui-sm);
}

.toggle.is-lg {
  min-width: var(--control-height-lg);
  height:    var(--control-height-lg);
  padding:   0 calc(var(--control-padding-x-lg) / 2);
  font-size: var(--text-ui-lg);
}

.toggle.is-sm svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.toggle.is-lg svg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

.toggle:disabled {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

.toggle[aria-invalid="true"] {
  border-color: var(--danger);
}

}