/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
@keyframes spin-animation-up {
  0% {
    transform: translateY(0);
    transform-origin: center;
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(30px);
    transform-origin: center;
    opacity: 1;
  }
}
@keyframes spin-animation-down {
  0% {
    transform: translateY(0);
    transform-origin: center;
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-30px);
    transform-origin: center;
    opacity: 1;
  }
}
:host {
  --wcs-counter-border-radius: var(--wcs-semantic-border-radius-full);
  --wcs-counter-value-color-default: var(--wcs-semantic-color-text-primary);
  --wcs-counter-value-color-disabled: var(--wcs-semantic-color-text-tertiary);
  --wcs-counter-font-weight: var(--wcs-semantic-font-weight-heavy);
  --wcs-counter-height-m: var(--wcs-semantic-size-m);
  --wcs-counter-height-l: var(--wcs-semantic-size-l);
  --wcs-counter-font-size-m: var(--wcs-semantic-font-size-m);
  --wcs-counter-font-size-l: var(--wcs-semantic-font-size-l);
  --wcs-counter-padding-m: var(--wcs-semantic-spacing-small);
  --wcs-counter-padding-l: var(--wcs-semantic-spacing-base);
  --wcs-counter-background-color: var(--wcs-semantic-color-background-surface-secondary);
  --wcs-counter-gap-size-m: calc(1.5 * var(--wcs-semantic-spacing-base));
  --wcs-counter-gap-size-l: calc(2 * var(--wcs-semantic-spacing-base));
  --wcs-counter-outline-color-focus: var(--wcs-semantic-color-border-focus-base);
  --wcs-counter-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
  --wcs-counter-padding: var(--wcs-counter-padding-m);
  --wcs-counter-height: var(--wcs-counter-height-m);
  --wcs-counter-font-size: var(--wcs-counter-font-size-m);
  --wcs-counter-gap: var(--wcs-counter-gap-size-m);
  display: flex;
}
:host .counter {
  box-sizing: border-box;
  height: var(--wcs-counter-height);
  font-family: var(--wcs-font-sans-serif);
  font-size: var(--wcs-counter-font-size);
  font-weight: var(--wcs-counter-font-weight);
  color: var(--wcs-counter-value-color-default);
  display: flex;
  align-items: center;
  padding: var(--wcs-counter-padding);
  width: fit-content;
  overflow: hidden;
  border-radius: var(--wcs-counter-border-radius);
  background-color: var(--wcs-counter-background-color);
  background-clip: padding-box;
  gap: var(--wcs-counter-gap);
}
:host .counter:focus-within {
  outline: none;
}
:host .counter:has(.current-value:focus-visible) {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);
  outline-offset: 0;
  border-radius: var(--wcs-counter-border-radius);
}
@supports not selector(&:has(.current-value:focus-visible)) {
  :host .counter:focus-within {
    outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);
    outline-offset: 0;
    border-radius: var(--wcs-counter-border-radius);
  }
}
:host .counter-container {
  height: var(--wcs-counter-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
:host .outliers {
  position: absolute;
}
:host #outlier-down {
  top: calc(var(--wcs-counter-height) / 2 * -1);
}
:host #outlier-up {
  bottom: calc(var(--wcs-counter-height) / 2 * -1);
}
:host .current-value {
  outline: none;
}
:host .animate-up {
  animation: spin-animation-up var(--wcs-counter-transition-duration) ease-in-out;
}
:host .animate-down {
  animation: spin-animation-down var(--wcs-counter-transition-duration) ease-in-out;
}
:host [hidden] {
  opacity: 0;
}

:host([size=m]) {
  --wcs-counter-padding: var(--wcs-counter-padding-m);
  --wcs-counter-height: var(--wcs-counter-height-m);
  --wcs-counter-font-size: var(--wcs-counter-font-size-m);
  --wcs-counter-gap: var(--wcs-counter-gap-size-m);
}

:host([size=l]) {
  --wcs-counter-padding: var(--wcs-counter-padding-l);
  --wcs-counter-height: var(--wcs-counter-height-l);
  --wcs-counter-font-size: var(--wcs-counter-font-size-l);
  --wcs-counter-gap: var(--wcs-counter-gap-size-l);
}

:host([disabled]) {
  cursor: not-allowed;
}
:host([disabled]) .counter {
  color: var(--wcs-counter-value-color-disabled);
}