@counter-padding: 0 4px;
@counter-font-color: #fff;
@counter-background: var(--color-primary);
@counter-input-width: 28px;
@counter-input-margin: 0 4px;
@counter-input-font-size: 14px;
@counter-button-size: 28px;
@counter-button-icon-size: 100%;
@counter-disabled-color: var(--color-text-disabled);
@input-error-color: var(--color-danger);

:root {
  --counter-padding: @counter-padding;
  --counter-font-color: @counter-font-color;
  --counter-background: @counter-background;
  --counter-input-width: @counter-input-width;
  --counter-input-margin: @counter-input-margin;
  --counter-input-font-size: @counter-input-font-size;
  --counter-button-size: @counter-button-size;
  --counter-button-icon-size: @counter-button-icon-size;
  --counter-disabled-color: @counter-disabled-color;
  --input-error-color: @input-error-color;
}

.var-counter {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;

  &__controller {
    display: flex;
    align-items: center;
    color: var(--counter-font-color);
    border-radius: var(--counter-button-size);
    padding: var(--counter-padding);
    background: var(--counter-background);
    transition: background-color 0.25s;
  }

  &__decrement-button[var-counter-cover] {
    width: var(--counter-button-size);
    height: var(--counter-button-size);
    font-size: var(--counter-button-icon-size);
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  &__input {
    width: var(--counter-input-width);
    font-size: var(--counter-input-font-size);
    outline: none;
    border: none;
    background: transparent;
    padding: 0;
    text-align: center;
    color: var(--counter-font-color);
    margin: var(--counter-input-margin);

    &[disabled] {
      background: transparent;
    }
  }

  &__increment-button[var-counter-cover] {
    width: var(--counter-button-size);
    height: var(--counter-button-size);
    font-size: var(--counter-button-icon-size);
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  &--disabled {
    background: var(--counter-disabled-color);
  }

  &--hidden {
    opacity: 0;
  }

  &--error {
    background: var(--color-danger);
  }
}