---
id: gatey-css-variables
title: Dynamic CSS Variables
slug: /gatey/css-variables
sidebar_position: 20
description: "Dynamic CSS custom properties injected by Gatey for authentication state, groups, and attributes—ideal for conditional UI and theming."
tags: [gatey, css, custom-properties, visibility, rtl, ltr, cognito]
hide_title: true
---
## Dynamic CSS Variables

Gatey injects custom properties on `:root`. Use them to toggle visibility (`flex` / `none`) or print Cognito data via `content`.

---

### Initialization Flags

- `--gatey-initialized`
- `--gatey-not-initialized`

---

### Editor Mode

When a page is open in Elementor or Gutenberg, Gatey sets `--gatey-in-editor` to `flex` so elements remain visible in the editor even if they would be hidden on the live site.

```css
body.elementor-editor-active,
body.wp-admin,
body.block-editor-iframe__body {
  --gatey-in-editor: flex;
}
```

---

### Authentication & MFA

- `--gatey-account-authenticated` / `--gatey-account-not-authenticated`
- `--gatey-account-mfa-enabled` / `--gatey-account-mfa-not-enabled`

---

### Group Membership

For every Cognito group `<g>`, Gatey outputs:

- `--gatey-account-group-<g>`
- `--gatey-account-group-not-<g>`

---

### Cognito Attributes

- `--gatey-account-attribute-email`
- `--gatey-account-attribute-family_name`
- Custom attributes: `--gatey-account-attribute-custom-<attr>`

---

### Usage Examples

```css
/* Visible only to admins */
.admin-panel {
  display: var(--gatey-account-group-admin);
}

/* Show element while editing, or when authenticated */
.show-in-editor-or-if-authenticated {
  display: var(--gatey-in-editor, var(--gatey-account-authenticated, none));
}
```