.counterInput {
  display: inline-flex;
  flex-direction: row;
  gap: var(--gap--xs);
  align-items: center;
}

.counterInput__control {
  overflow: hidden;
  display: inline-flex;
  flex-direction: row;
  align-items: center;

  box-sizing: border-box;
  height: calc(var(--size--formField) + 2 * var(--borderWidth--line));

  background-color: rgb(var(--background--neutral-base-default--light));
  border: 1px solid rgb(var(--border--neutral-low-default--light));

  &:focus-within {
    border-color: rgb(var(--border--controls-medium-selected--light));
    box-shadow: var(--shadow--focus--light);
  }
}

.counterInput__control--error,
.counterInput__control--error:focus-within {
  border-color: rgb(var(--border--critical-high-default--light));
}

.counterInput__control--warning,
.counterInput__control--warning:focus-within {
  border-color: rgb(var(--border--warning-medium-default--light));
}

.counterInput__control--disabled {
  background-color: rgb(var(--background--neutral-low-default--light));
}

.counterInput__control .numberField {
  height: 24px;

  text-align: center;

  background: transparent;
  border: none;
  box-shadow: none;

  &:focus {
    border: none;
    outline: none;
    box-shadow: none;
  }
}