## The Style object

Elements are styled using a `Style` object, which consists of CSS properties nested under objects for any of the following variants:

* `base`, base variant—all other variants inherit from these styles
* `complete`, applied when the Element has valid input
* `empty`, applied when the Element has no customer input
* `invalid`, applied when the Element has invalid input

The following pseudo-classes and pseudo-elements can also be styled using a nested object inside of a variant:

* `:hover`
* `:focus`
* `::placeholder`
* `::selection`
* `:-webkit-autofill`
* `:disabled`, available for all Elements except the `paymentRequestButton` Element.
* `::-ms-clear`, available for the `cardNumber`, `cardExpiry`, and `cardCvc` Elements.
  Inside the `::-ms-clear` selector, the display property can be customized.

The following CSS properties are supported:

### Supported CSS properties

- `backgroundColor`
  The [background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) CSS property.

This property works best with the `::selection` pseudo-class.
In other cases, consider setting the background color on the Element's container instead.

- `color`
  The [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.

- `fontFamily`
  The [font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) CSS property.

- `fontSize`
  The [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) CSS property.

- `fontSmoothing`
  The [font-smoothing](https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth) CSS property.

- `fontStyle`
  The [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) CSS property.

- `fontVariant`
  The [font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) CSS property.

- `fontWeight`
  The [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) CSS property.

- `iconColor`
  A custom property, used to set the color of the icons that are rendered in an Element.

- `lineHeight`
  The [line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) CSS property.

To avoid cursors being rendered inconsistently across browsers, consider using a padding on the Element's container instead.

- `letterSpacing`
  The [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) CSS property.

- `textAlign`
  The [text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) CSS property.

Available for the `cardNumber`, `cardExpiry`, `cardCvc` and `iban` Elements.

- `padding`
  The [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) CSS property.

Available for the `idealBank` Element.
Accepts integer length with `px` unit as values.

- `textDecoration`
  The [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) CSS property.

- `textShadow`
  The [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) CSS property.

- `textTransform`
  The [text-transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) CSS property.

### Example

```title
Creating a styled element
```