/* Variants */
/* Define maps for size-related variables */
/* Define maps for emphasis-related variables */
nv-iconbutton.root {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: var(--font-weight-medium-emphasis);
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  transition: background-color 150ms ease-out;
  height: fit-content;
  width: fit-content;
}
nv-iconbutton.size-xs {
  padding: calc(var(--button-xs-icon-button-padding) - 1px);
  gap: var(--button-xs-gap);
  border-radius: var(--button-xs-border-radius);
  line-height: var(--button-xs-line-height);
  font-size: var(--button-xs-font-size);
}
nv-iconbutton.size-sm {
  padding: calc(var(--button-sm-icon-button-padding) - 1px);
  gap: var(--button-sm-gap);
  border-radius: var(--button-sm-border-radius);
  line-height: var(--button-sm-line-height);
  font-size: var(--button-sm-font-size);
}
nv-iconbutton.size-md {
  padding: calc(var(--button-md-icon-button-padding) - 1px);
  gap: var(--button-md-gap);
  border-radius: var(--button-md-border-radius);
  line-height: var(--button-md-line-height);
  font-size: var(--button-md-font-size);
}
nv-iconbutton.size-lg {
  padding: calc(var(--button-lg-icon-button-padding) - 1px);
  gap: var(--button-lg-gap);
  border-radius: var(--button-lg-border-radius);
  line-height: var(--button-lg-line-height);
  font-size: var(--button-lg-font-size);
}
nv-iconbutton.emphasis-high {
  background: var(--components-button-high-background);
  border: 1px solid var(--components-button-high-border);
  color: var(--components-button-high-text);
}
nv-iconbutton.emphasis-high:hover {
  background: var(--components-button-high-background-hover);
  color: var(--components-button-high-text-hover);
}
nv-iconbutton.emphasis-high:focus, nv-iconbutton.emphasis-high:focus-within {
  outline: none;
}
nv-iconbutton.emphasis-high:focus-visible, nv-iconbutton.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-iconbutton.emphasis-high:disabled {
  background: var(--components-button-high-background);
  color: var(--components-button-high-text);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
nv-iconbutton.emphasis-high nv-icon > svg {
  color: var(--components-button-high-icon);
}
nv-iconbutton.emphasis-medium {
  background: var(--components-button-medium-background);
  border: 1px solid var(--components-button-medium-border);
  color: var(--components-button-medium-text);
}
nv-iconbutton.emphasis-medium:hover {
  background: var(--components-button-medium-background-hover);
  color: var(--components-button-medium-text-hover);
}
nv-iconbutton.emphasis-medium:focus, nv-iconbutton.emphasis-medium:focus-within {
  outline: none;
}
nv-iconbutton.emphasis-medium:focus-visible, nv-iconbutton.emphasis-medium:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}
nv-iconbutton.emphasis-medium:disabled {
  background: var(--components-button-medium-background);
  color: var(--components-button-medium-text);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
nv-iconbutton.emphasis-medium nv-icon > svg {
  color: var(--components-button-medium-icon);
}
nv-iconbutton.emphasis-low {
  background: var(--components-button-low-background);
  border: 1px solid var(--components-button-low-border);
  color: var(--components-button-low-text);
}
nv-iconbutton.emphasis-low:hover {
  background: var(--components-button-low-background-hover);
  color: var(--components-button-low-text-hover);
}
nv-iconbutton.emphasis-low:focus, nv-iconbutton.emphasis-low:focus-within {
  outline: none;
}
nv-iconbutton.emphasis-low:focus-visible, nv-iconbutton.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-iconbutton.emphasis-low:disabled {
  background: var(--components-button-low-background);
  color: var(--components-button-low-text);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
nv-iconbutton.emphasis-low nv-icon > svg {
  color: var(--components-button-low-icon);
}
nv-iconbutton.emphasis-lower {
  background: var(--components-button-lower-background);
  border: 1px solid var(--components-button-lower-border);
  color: var(--components-button-lower-text);
}
nv-iconbutton.emphasis-lower:hover {
  background: var(--components-button-lower-background-hover);
  color: var(--components-button-lower-text-hover);
}
nv-iconbutton.emphasis-lower:focus, nv-iconbutton.emphasis-lower:focus-within {
  outline: none;
}
nv-iconbutton.emphasis-lower:focus-visible, nv-iconbutton.emphasis-lower:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}
nv-iconbutton.emphasis-lower:disabled {
  background: var(--components-button-lower-background);
  color: var(--components-button-lower-text);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
nv-iconbutton.emphasis-lower nv-icon > svg {
  color: var(--components-button-lower-icon);
}
nv-iconbutton.loading [slot=leading-icon] {
  display: none;
}
nv-iconbutton.shape-rounded {
  border-radius: var(--radius-rounded-full);
}