# Styling hooks

Style hooks are attachment points for CSS that goes beyond [tweaking CSS variables to adjust the syntax highlighter](./CSS.md). They are CSS variables that contain information about the animation, such as the number of rows, the total width, or the width of the line number colum. Your CSS can use this information to add dimension-dependent borders, backgrounds, or decorative gimmicks (such as a fake editor window) to your animation.

| Properties                            | Notes                                                                                              |
| ------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `--vertical-align`                    | Either `1` or `0`                                                                                  |
| `--total-rows`, `--total-cols`        | _Overall_ max number of rows and columns                                                           |
| `--current-rows`, `--current-cols`    | Number of rows and columns for the _current_ animation keyframe                                    |
| `--total-width`, `--total-height`     | _Overall_ max width and height (CSS `<length>`), that includes margins, line numbers, offsets etc. |
| `--current-width`, `--current-height` | Width and height (CSS `<length>`) for the _current_ animation keyframe                             |
| `--line-numbers-width`                | Width (CSS `<length>`) of the line number colum (if enabled)                                       |

Note: these variables are meant to be _read_ by your CSS when defining `::before` and/or `::after`! Setting them to new values will have no effect.

## Example: window background

You can attach the pseudo elements [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`::after`](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) to the main animation element `.cm-animation`, which gives you two extra boxes to play with. As children of the element animation element they inherit all of its important CSS properties (such as the `transition-duration`), including the above styling hooks. The following example show how you can use `::before` and the styling hooks to attach a background "window" to an animation that smoothly grows and shrinks to track the number of lines displayed in each keyframe:

```css
.cm-animation::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--vertical-align) * 50%);
  left: 0;
  width: 100%;
  height: var(--current-height);
  background: #fff;
  transform: translateY(calc(var(--vertical-align) * -50%));
  transition-property: all;
  transition-duration: inherit;
  border-radius: 1em;
  box-shadow: 0 0 2em #ccc;
}
```
