@layer atoms {
  .mobius-number-field {
    box-sizing: border-box;
    width: 100%;

    &:where(.--is-optional) > :where(.mobius-label)::after {
      content: " (optional)";
    }

    &.--hide-spin-buttons {
      appearance: textfield;
      -moz-appearance: textfield;

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

  .mobius-number-field__input-wrapper {
    width: 100%;
  }

  .mobius-number-field__input {
    box-sizing: border-box;
    border: var(--border-default);
    border-radius: var(--input-border-radius);
    background-color: var(--color-background-input);
    padding: var(--input-field-padding);
    font-family: var(--font-family);
    font-size: var(--font-size-regular);
    color: var(--color-text);
    outline: none;
    margin: 0;
    max-width: var(--text-input-max-width);
    width: 100%;

    &::placeholder {
      color: var(--color-text-medium);
    }

    /* Focused */
    &:focus-visible:not(.--is-disabled) {
      border-color: var(--color-primary);
      background-color: var(--color-background-input-active);
      box-shadow: var(--box-shadow-default);
    }

    /* Hovered */
    &:hover:not(.--is-disabled):not(&.--is-invalid) {
      border-color: var(--color-primary);
      background-color: var(--color-background-input-active);
    }

    /* Disabled */
    &.--is-disabled {
      background-color: var(--color-background-light);
      border-color: var(--color-border-medium);
      color: var(--color-text-light);
      cursor: not-allowed;
    }

    /* Invalid */
    &.--is-invalid:not(.--is-disabled) {
      border-color: var(--color-error);
      background-color: var(--color-error-background);
      color: var(--color-error);
    }
  }
}
