:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  display: inline-block;
}

.root {
  display: grid;
  grid-template-columns: min-content auto 1fr;
  grid-template-rows: max-content max-content;
  align-items: stretch;
}

::slotted(*) {
  text-align: center;
}

nano-icon-button {
  background: var(--nano-color-base-0);
  color: var(--nano-color-primary-1000);
  display: flex;
  border-radius: var(--nano-border-radius-pill);
  position: relative;
  z-index: 1;
  inline-size: fit-content;
  block-size: 100%;
}
nano-icon-button:hover {
  background: var(--nano-color-primary-100);
}
nano-icon-button:active {
  background: var(--nano-color-primary-300);
}
nano-icon-button::part(base) {
  border: 1px solid var(--nano-color-neutral-300);
}
nano-icon-button::part(base):focus-visible {
  outline: var(--nano-focus-ring-color) solid 3px;
  outline-offset: -2px;
}

.minus {
  grid-column: 1;
  grid-row: 1;
}
.minus nano-icon-button {
  --padding: 0.4375em 0.625em 0.4375em 1.125em;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.minus nano-icon-button::part(base) {
  border-inline-end: none;
}

.plus {
  grid-column: 3;
  grid-row: 1;
}
.plus nano-icon-button {
  --padding: 0.4375em 1.125em 0.4375em 0.625em;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.plus nano-icon-button::part(base) {
  border-inline-start: none;
}