.gradient-unit-input {
  display: inline-flex;
  min-height: 24px;
  background-color: var(--gp-input-background-color, #f5f5f5);
  outline: 1px solid var(--gp-input-outline-color, #e6e6e6);
  outline-offset: -1px;
  border-radius: var(--gp-input-shape, 4px);
  color: var(--gp-container-text-color, rgba(0, 0, 0, 0.9));
  font-size: var(--gp-container-text-size, 12px);
  font-family: var(--gp-container-text-font, inherit);
  overflow: hidden;

  &:hover {
    outline-color: var(--gp-input-hover-outline-color, #d6d6d6);
  }

  &:focus-within {
    outline-color: var(--gp-input-focus-outline-color, #0d99ff);
  }

  input,
  select {
    appearance: none;
    height: var(--gp-input-height, 24px);
    padding: var(--gp-input-padding, 0 4px);
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    -webkit-font-smoothing: antialiased;

    &:focus {
      outline: none;
    }
  }

  input {
    flex: 1;
    width: 100%;
  }

  input[type='number'] {
    // Hide arrow buttons from number input in Firefox
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
    }
  }

  select {
    text-align: center;

    &:hover,
    &:focus {
      background-color: var(--gp-unit-select-hover-background-color, rgba(0, 0, 0, 0.12));
    }
  }
}
