@innovaccer/design-system/css/src/components/metricInput.module.css

React components library project for Innovaccer Design System

.MetricInput-input::-ms-clear {
  display: none;
}

.MetricInput {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--border-radius-10);
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
  background: var(--white);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.MetricInput--regular {
  height: var(--spacing-80);
}

.MetricInput--large {
  height: 40px;
}

.MetricInput--small {
  height: var(--spacing-60);
}

.MetricInput:hover {
  background: var(--secondary-lightest);
  cursor: text;
}

.MetricInput:focus-within {
  background: var(--white);
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
}

.MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
}

.MetricInput:focus-within .MetricInput-icon {
  color: var(--primary);
}

.MetricInput--disabled {
  background: var(--secondary-lightest);
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);
  pointer-events: none;
}

.MetricInput--readOnly {
  background: var(--secondary-lightest);
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
  pointer-events: none;
}

.MetricInput--disabled .MetricInput-icon {
  color: var(--inverse-lightest);
}

.MetricInput--error,
.MetricInput--error:hover {
  background: var(--white);
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
}

.MetricInput--error:focus-within {
  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
}

.MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
  outline: var(--border-width-05) solid var(--alert);
  outline-offset: var(--spacing-05);
}

.MetricInput--error:focus-within .MetricInput-icon {
  color: var(--alert);
}

/* Content wrapper — holds icon, prefix, input, suffix */
.MetricInput-content {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.MetricInput-content--regular {
  padding: var(--spacing-15) var(--spacing-15);
  gap: var(--spacing-05);
}

.MetricInput-content--large {
  padding: var(--spacing-20) var(--spacing-15);
  gap: var(--spacing-15);
}

.MetricInput-content--small {
  padding: var(--spacing-10) var(--spacing-15);
  gap: var(--spacing-05);
}

.MetricInput-input {
  display: flex;
  width: 100%;
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size);
  line-height: var(--font-height-s);
  color: var(--night);
  padding: 0;
  border: none;
  background: transparent;
}

.MetricInput-input--large {
  line-height: var(--font-height-m);
  font-size: var(--font-size-m);
}

.MetricInput-input--regular {
  line-height: var(--font-height);
  font-size: var(--font-size);
}

.MetricInput-input--small {
  line-height: var(--font-height-s);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-medium);
}

.MetricInput-input::placeholder {
  color: var(--inverse-lighter);
}

.MetricInput-input:focus {
  outline: 0;
}

.MetricInput-input:disabled .MetricInput-input::placeholder {
  color: var(--inverse-lighter);
}

.MetricInput-icon--regular {
  margin-right: var(--spacing-20);
  line-height: var(--font-height-s);
}

.MetricInput-icon--large {
  margin-right: var(--spacing-30);
  line-height: var(--font-height-m);
}

.MetricInput-icon--small {
  margin-right: var(--spacing-10);
}

.MetricInput-input::-webkit-inner-spin-button,
.MetricInput-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

/* Arrow buttons (decrement on left, increment on right) */
.MetricInput-arrowButton {
  flex-shrink: 0;
  align-self: stretch;
  width: var(--spacing-60);
  background: var(--secondary-light);
  color: var(--inverse);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  user-select: none;
}

.MetricInput-arrowButton--left {
  border-right: var(--border);
  border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
}

.MetricInput-arrowButton--right {
  border-left: var(--border);
  border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
}

.MetricInput-arrowButton:hover {
  background: var(--secondary);
}

.MetricInput-arrowButton:active {
  background: var(--secondary-dark);
}

.MetricInput-arrowButton:focus {
  outline: 0;
}

.MetricInput-arrowButton:focus-visible {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
}

@media (forced-colors: active) {
  /* box-shadow is stripped — restore a real border for the wrapper boundary */
  .MetricInput {
    border: var(--border-width-2-5) solid ButtonText;
    box-shadow: none;
  }

  .MetricInput--disabled {
    border-color: GrayText;
  }

  /* Wrapper focus rings */
  .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
    outline: var(--border-width-05) solid Highlight;
    outline-offset: var(--spacing-05);
  }

  .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
    outline: var(--border-width-05) solid Highlight;
    outline-offset: var(--spacing-05);
  }

  /* Arrow button states */
  .MetricInput-arrowButton:disabled {
    color: GrayText;
  }

  .MetricInput-arrowButton:focus-visible {
    outline: var(--border-width-05) solid Highlight;
    outline-offset: var(--spacing-05);
  }
}