/* monster-quantity – Theme-aware using central Monster tokens */

:host {
  /* Size tokens */
  --qty-height: 40px;
  --qty-radius: 0; 
  --qty-gap: var(--monster-space-4);
  --qty-pad-x: var(--monster-space-4);

  /* Anbindung an eure zentralen Tokens */
  --qty-bg: var(--monster-theme-control-bg-color);
  --qty-fg: var(--monster-theme-control-color);
  --qty-border-color: var(--monster-theme-control-border-color);
  --qty-outline: var(--monster-outline-width) solid var(--monster-theme-control-border-color);

  /* Buttons */
  --qty-btn-bg: var(--monster-bg-color-primary-3);
  --qty-btn-bg-hover: var(--monster-bg-color-primary-4);
  --qty-btn-bg-active: var(--monster-bg-color-primary-2);
  --qty-btn-fg: var(--monster-color-primary-3);

  /* Input */
  --qty-input-fg: var(--monster-color-primary-1);
  --qty-input-bg: transparent;

  --qty-shadow:none; 
  color: var(--qty-fg);
  font-family: var(--monster-font-family);
}

/* Container */
[part="control"] {
  display: inline-flex;
  vertical-align: middle;
}

/* Pill-Group */
[part="input-group"] {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--qty-gap);
  height: var(--qty-height);
  padding-inline: var(--qty-pad-x);
  background: var(--qty-bg);
  color: var(--qty-fg);
  border: var(--monster-theme-control-border-width, 1px)
          var(--monster-theme-control-border-style, solid)
          var(--qty-border-color);
  border-radius: var(--qty-radius);
  box-shadow: var(--qty-shadow);
}

/* Buttons */
[part="decrement-button"],
[part="increment-button"] {
  display: inline-grid;
  place-items: center;
  width: calc(var(--qty-height) - var(--monster-space-4));
  height: calc(var(--qty-height) - var(--monster-space-4));
  border: 0;
  border-radius: var(--qty-radius);
  background: var(--qty-btn-bg);
  color: var(--qty-btn-fg);
  cursor: pointer;
  transition: transform .08s ease, background-color .15s ease;
}

[part="decrement-button"] {
  transform: translateX(-7px);
}
[part="increment-button"] {
  transform: translateX(7px);
}


[part="decrement-button"]:hover,
[part="increment-button"]:hover {
  background: var(--qty-btn-bg-hover);
}

[part="decrement-button"]:active,
[part="increment-button"]:active {
  background: var(--qty-btn-bg-active);
}

[part="decrement-button"]:active {
  transform: scale(.95) translateX(-7px);
}
[part="increment-button"]:active {
  transform: scale(.95) translateX(7px);
}

[part="decrement-button"] svg,
[part="increment-button"] svg {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}

/* Input */
[part="input"] {
  min-width: 2.5ch;
  max-width: 6.5ch;
  text-align: center;
  font: inherit;
  color: var(--qty-input-fg);
  background: var(--qty-input-bg);
  border: 0;
  outline: none;
  padding: 0 .25rem;
  appearance: textfield; /* Safari */
}

/* Native Number-Spinner entfernen (falls type=number verwendet wird) */
[part="input"]::-webkit-outer-spin-button,
[part="input"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Fokus */
:host(:focus-within) [part="input-group"] {
  outline: var(--qty-outline);
  outline-offset: 2px;
}

/* Disabled */
:host([disabled]) [part="decrement-button"],
:host([disabled]) [part="increment-button"] {
  opacity: .5;
  cursor: not-allowed;
}

:host([disabled]) [part="input"] {
  opacity: .75;
  cursor: not-allowed;
}

/* Größen-Varianten */
:host([data-size="compact"]) { --qty-height: 32px; }
:host([data-size="large"])   { --qty-height: 48px; }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  [part="decrement-button"],
  [part="increment-button"] { transition: none; }
}