## 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.