Conditions

Conditions allow you to apply different styles and behaviors based on specific conditions or states.

Extra Conditions

Cerberus extends the built-in conditions provided by Panda-CSS.

Name	Selector
_cerberusTheme	`[data-theme=cerberus] &`
_acheronTheme	`[data-theme=acheron] &`
_lightMode	`[data-color-mode=light] &, &.light, .light &`
_darkMode	`[data-color-mode=dark] &, &.dark, .dark &`
_open	`'&:is([open], [data-open], [data-state=open])'`
_closed	`'&:is([closed], [data-closed], [data-state=closed])'`
_modalOpen	`&:is([data-modal-open=true])`
_screenReaderOnly	`&:is([data-screen-reader-only=true])`
_isOver	`&:is([data-over=true])`
_isDropped	`&:is([data-dropped=true])`
_invalid	`&:is(:invalid, [data-invalid], [aria-invalid])`
_userInvalid	`&:is(:user-invalid, [aria-invalid])`
_groupInvalid	`.group:is([data-invalid] &, [aria-invalid]) &`
_groupChecked	`.group:is([data-checked="true"] &, [aria-checked="true"]) &`
_positionBottom	`&:is([data-position=bottom])`
_positionTop	`&:is([data-position=top])`
_positionLeft	`&:is([data-position=left])`
_positionRight	`&:is([data-position=right])`
_startIcon	`&:is([data-start-icon=true])`
_tooltip	`&:is([data-tooltip=true])`
_notify	`&:is([data-notify=true])`
_admin	`&:is([data-role=admin])`
_student	`&:is([data-role=student])`
_user	`&:is([data-role=user])`
_highlight	`&:is(::selection)`
_spellingError	`&:is(::spelling-error)`
_grammarError	`&:is(::grammar-error)`
_pagePalette	`&:is([data-palette=page])`
_actionPalette	`&:is([data-palette=action])`
_infoPalette	`&:is([data-palette=info])`
_successPalette	`&:is([data-palette=success])`
_warningPalette	`&:is([data-palette=warning])`
_dangerPalette	`&:is([data-palette=danger])`