.amplify-stepperfield {
  flex-direction: var(--amplify-components-stepperfield-flex-direction);

  --amplify-components-fieldcontrol-border-color: var(
    --amplify-components-stepperfield-border-color
  );
  --amplify-components-button-border-color: var(
    --amplify-components-stepperfield-border-color
  );
  --amplify-components-fieldcontrol-color: var(
    --amplify-components-stepperfield-input-color
  );
  --amplify-components-fieldcontrol-font-size: var(
    --amplify-components-stepperfield-input-font-size
  );
  --amplify-components-button-color: var(
    --amplify-components-stepperfield-button-color
  );
  --amplify-components-button-active-color: var(
    --amplify-components-stepperfield-button-active-color
  );
  --amplify-components-button-active-background-color: var(
    --amplify-components-stepperfield-button-active-background-color
  );
  --amplify-components-button-focus-color: var(
    --amplify-components-stepperfield-button-focus-color
  );
  --amplify-components-button-focus-background-color: var(
    --amplify-components-stepperfield-button-focus-background-color
  );
  --amplify-components-button-disabled-color: var(
    --amplify-components-stepperfield-button-disabled-color
  );
  --amplify-components-button-disabled-background-color: var(
    --amplify-components-stepperfield-button-disabled-background-color
  );
  --amplify-components-button-hover-color: var(
    --amplify-components-stepperfield-button-hover-color
  );
  --amplify-components-button-hover-background-color: var(
    --amplify-components-stepperfield-button-hover-background-color
  );
}

.amplify-stepperfield__button--decrease,
.amplify-stepperfield__button--increase {
  background-color: var(
    --amplify-components-stepperfield-button-background-color
  );
  &--disabled {
    background-color: var(
      --amplify-components-stepperfield-button-disabled-background-color
    );
  }
  &--quiet {
    border-width: 0 0 var(--amplify-components-button-border-width) 0;
    border-radius: 0;
  }
}

.amplify-stepperfield__button--decrease {
  &[data-invalid='true'] {
    border-inline-end: none;
  }
}

.amplify-stepperfield__button--increase {
  &[data-invalid='true'] {
    border-inline-start: none;
  }
}

.amplify-stepperfield__input {
  // To remove default arrows inside input[type = 'number']
  // Chrome, Safari, Edge, Opera
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  // Firefox
  -moz-appearance: textfield;

  text-align: var(--amplify-components-stepperfield-input-text-align);

  // To remove overlapped borders but keep those when the input gets focused
  // so that focus indicator will not look thinner on both sides
  // also keep those borders when the input has errors
  &:not(:focus, [aria-invalid='true']) {
    border-inline-start: none;
    border-inline-end: none;
  }
}