# Focus mixins and variables

There are three ways of adding a focus style to an element; with a shadow, outline or with a pseudo element.

## Shadow

The focus shadow can be used on elements who have an outline that is used for other purposes.

```css
@include telia-focus-shadow();
```

## Outline

The focus outline can be used on most elements, the $offset parameter defines the gap between the component and
the focus outline.

```css
@include telia-focus-outline($offset: $telia-spacing-4);
```

## Pseudo element

When neither a shadow nor an outline can be used to create focus style a pseudo element can be used. Create a before or
after pseudo element and apply the focus mixin on it. The pseudo focus is `position: absolute`, so the parent
must be `position: relative`.

```css
@include telia-pseudo-element-focus-style(
  $offset: $telia-spacing-4,
  $radius: full
);
```
