.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-gap-s);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  background-color: var(--color-neutral-fff);
}

.counter__button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-text-heading);
  appearance: none;
  cursor: pointer;
  transition: color var(--transition-duration) var(--transition-easing);
}

.counter__button:disabled {
  color: var(--color-border-default);
  cursor: default;
}

.counter__value {
  width: 32px;
  padding: 0;
  border: 0;
  background-color: transparent;
  font: var(--type-text-caption-sb);
  color: var(--color-text-muted);
  text-align: center;
  appearance: none;
}

.counter__button:active:not(:disabled) {
  color: var(--color-accent-600);
  transition-duration: 0s;
}

@media (hover: hover) {
  .counter__button:hover:not(:active):not(:disabled) {
    color: var(--color-accent-400);
  }
}