@vaadin/vaadin-lumo-styles/src/components/number-field.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2017 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_number-field {
  :host([readonly]) [part$='button'] {
    pointer-events: none;
  }

  :host([step-buttons-visible]:not([theme~='align-right'])) ::slotted(input) {
    text-align: center;
  }

  :host(:not([disabled])) [part$='button'][disabled] {
    opacity: 0.2;
  }

  :host([step-buttons-visible]) [part='input-field'] {
    padding: 0;
  }

  [part~='decrease-button'],
  [part~='increase-button'] {
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    -webkit-user-select: none;
    user-select: none;
  }

  [part~='decrease-button']::before,
  [part~='increase-button']::before {
    margin-top: 0.25em;
  }

  [part~='decrease-button']::before {
    content: var(--lumo-icons-minus);
  }

  [part~='increase-button']::before {
    content: var(--lumo-icons-plus);
  }

  /* RTL specific styles */
  :host([dir='rtl']) [part='input-field'] {
    direction: ltr;
  }

  :host([dir='rtl']:not([theme~='align-right'])) ::slotted(input) {
    --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
  }
}