## 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` (string)
  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` (string)
  The [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.

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

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

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

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

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

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

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

- `lineHeight` (string)
  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` (string)
  The [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) CSS property.

- `textAlign` (string)
  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` (string)
  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` (string)
  The [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) CSS property.

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

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

### Creating a styled element

```js
var element = elements.create('card', {
  style: {
    base: {
      iconColor: '#c4f0ff',
      color: '#fff',
      fontWeight: '500',
      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',
      ':-webkit-autofill': {
        color: '#fce883',
      },
      '::placeholder': {
        color: '#87BBFD',
      },
    },
    invalid: {
      iconColor: '#FFC7EE',
      color: '#FFC7EE',
    },
  },
});
```

```es_next
const element = elements.create('card', {
  style: {
    base: {
      iconColor: '#c4f0ff',
      color: '#fff',
      fontWeight: '500',
      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',
      ':-webkit-autofill': {
        color: '#fce883',
      },
      '::placeholder': {
        color: '#87BBFD',
      },
    },
    invalid: {
      iconColor: '#FFC7EE',
      color: '#FFC7EE',
    },
  },
});
```