.wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-number {
  display: flex;

  width: 100px;
  padding: 4px 0;

  background-color: var(--bg-primary);
  border: 2px solid var(--gray-100);
  border-radius: 4px;
}

.input-number__field {
  width: 100%;

  text-align: center;

  &:not(:only-child) {
    border-right: 1px solid var(--gray-050);
  }
}

.input-number__controls {
  width: 32px;
  min-width: 32px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  button {
    width: 100%;
    height: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: transparent;
  }

  app-icon {
    --fill: var(--text-primary);
  }

  @media screen and (max-width: 768px) {
    display: none;
  }
}
