nv-togglebutton {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
nv-togglebutton:focus-visible, nv-togglebutton:has(:focus-visible) {
  z-index: 1;
}
nv-togglebutton[size=xs] {
  padding: var(--button-xs-padding-y) var(--button-xs-padding-x);
  gap: var(--button-xs-gap);
  border-radius: var(--button-xs-border-radius);
  line-height: var(--button-xs-line-height);
  height: var(--button-xs-height);
  font-size: var(--button-xs-font-size);
}
nv-togglebutton[size=xs] nv-icon > svg {
  width: var(--spacing-3);
  height: var(--spacing-3);
  stroke-width: 1.2px;
}
nv-togglebutton[size=xs] {
  padding-top: calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));
  padding-bottom: calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));
  border-radius: var(--togglegroup-xs-button-radius);
  height: calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));
  border-width: 0;
}
nv-togglebutton[size=sm] {
  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
  gap: var(--button-sm-gap);
  border-radius: var(--button-sm-border-radius);
  line-height: var(--button-sm-line-height);
  height: var(--button-sm-height);
  font-size: var(--button-sm-font-size);
}
nv-togglebutton[size=sm] nv-icon > svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  stroke-width: 1.5px;
}
nv-togglebutton[size=sm] {
  padding-top: calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));
  padding-bottom: calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));
  border-radius: calc(var(--togglegroup-sm-button-radius) + 1px);
  height: calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));
  border-width: 0;
}
nv-togglebutton[size=md] {
  padding: var(--button-md-padding-y) var(--button-md-padding-x);
  gap: var(--button-md-gap);
  border-radius: var(--button-md-border-radius);
  line-height: var(--button-md-line-height);
  height: var(--button-md-height);
  font-size: var(--button-md-font-size);
}
nv-togglebutton[size=md] nv-icon > svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
  stroke-width: 1.6px;
}
nv-togglebutton[size=md] {
  padding-top: calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));
  padding-bottom: calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));
  border-radius: calc(var(--togglegroup-md-button-radius) + 1px);
  height: calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));
  border-width: 0;
}
nv-togglebutton[size=lg] {
  padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
  gap: var(--button-lg-gap);
  border-radius: var(--button-lg-border-radius);
  line-height: var(--button-lg-line-height);
  height: var(--button-lg-height);
  font-size: var(--button-lg-font-size);
}
nv-togglebutton[size=lg] nv-icon > svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
  stroke-width: 1.8px;
}
nv-togglebutton[size=lg] {
  padding-top: calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));
  padding-bottom: calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));
  border-radius: calc(var(--togglegroup-lg-button-radius) + 1px);
  height: calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));
  border-width: 0;
}
nv-togglebutton[emphasis=high] {
  background: var(--components-button-low-background);
  border: 1px solid var(--components-button-low-border);
  color: var(--components-button-low-text);
}
nv-togglebutton[emphasis=high]:hover {
  background: var(--components-button-low-background-hover);
  border: 1px solid var(--components-button-low-border);
  color: var(--components-button-low-text-hover);
}
nv-togglebutton[emphasis=high]:active {
  background: var(--components-button-low-background-active);
  border: 1px solid var(--components-button-low-border-active);
  color: var(--components-button-low-text-active);
}
nv-togglebutton[emphasis=high]:focus, nv-togglebutton[emphasis=high]:focus-within {
  outline: none;
}
nv-togglebutton[emphasis=high]:focus-visible, nv-togglebutton[emphasis=high]:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}
nv-togglebutton[emphasis=high]:disabled:not([disabled=false]) {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
nv-togglebutton[emphasis=high][active]:not([active=false]) {
  background: var(--components-button-low-background-active);
  border: 1px solid var(--components-button-low-border-active);
  color: var(--components-button-low-text-active);
}
nv-togglebutton[emphasis=low] {
  background: var(--components-button-lower-background);
  border: 1px solid var(--components-button-lower-border);
  color: var(--components-button-lower-text);
}
nv-togglebutton[emphasis=low]:hover {
  background: var(--components-button-lower-background-hover);
  border: 1px solid var(--components-button-lower-border);
  color: var(--components-button-lower-text-hover);
}
nv-togglebutton[emphasis=low]:active {
  background: var(--components-button-lower-background-active);
  border: 1px solid var(--components-button-lower-border-active);
  color: var(--components-button-lower-text-active);
}
nv-togglebutton[emphasis=low]:focus, nv-togglebutton[emphasis=low]:focus-within {
  outline: none;
}
nv-togglebutton[emphasis=low]:focus-visible, nv-togglebutton[emphasis=low]:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}
nv-togglebutton[emphasis=low]:disabled:not([disabled=false]) {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
nv-togglebutton[emphasis=low][active]:not([active=false]), nv-togglebutton[emphasis=low]:active {
  background: var(--components-button-lower-background-hover);
  border: 1px solid var(--components-button-lower-border);
  color: var(--components-button-lower-text-hover);
}