#Pseudos

import { pseudosSystem } from "@poodle/system";
const theme: SystemThemeConfig = {
    // ....
};


const listSystem = compose(pseudosSystem, ...);


export const system = createSystem(listSystem);


const styles = system({
    theme,
    _hover: {
        mt: "10px",
        color: "primary"
    },
});


// Styles result
//  { "&:hover": {marginTop: "10px", color: "cyan"} },
PropTypeDescription
_activeTCSS pseudo-class :active
_afterTCSS pseudo-element :after
_backdropTCSS pseudo-element ::backdrop
_beforeTCSS pseudo-element ::before
_checkedTCSS pseudo-class :checked
_defaultTCSS pseudo-class :default
_definedTCSS pseudo-class :defined
_disabledTCSS pseudo-class :disabled
_enabledTCSS pseudo-class :enabled
_firstChildTCSS pseudo-class :first-child
_firstLetterTCSS pseudo-element ::first-letter
_firstOfTypeTCSS pseudo-class :first-of-type
_focusTCSS pseudo-class :focus
_focusWithinTCSS pseudo-class :focus-within
_hoverTCSS pseudo-class :hover
_indeterminateTCSS pseudo-class :indeterminate
_invalidTCSS pseudo-class :invalid
_langTCSS pseudo-class :lang()
_lastChildTCSS pseudo-class :last-child
_lastOfTypeTCSS pseudo-class :last-of-type
_linkTCSS pseudo-class :link
_notTCSS pseudo-class :not()
_nthChildTCSS pseudo-class :nth-child()
_nthLastChildTCSS pseudo-class :nth-last-child()
_nthLastOfTypeTCSS pseudo-class :nth-last-of-type()
_nthOfTypeTCSS pseudo-class :nth-of-type()
_onlyChildTCSS pseudo-class :only-child
_onlyOfTypeTCSS pseudo-class :only-of-type
_optionalTCSS pseudo-class :optional
_placeholderTCSS pseudo-element ::placeholder
_placeholderShownTCSS pseudo-class :placeholder-shown
_readonlyTCSS pseudo-class :readonly
_readwriteTCSS pseudo-class :read-write
_requiredTCSS pseudo-class :required
_selectionTCSS pseudo-element ::selection
_targetTCSS pseudo-class :target
_validTCSS pseudo-class :valid
_visitedTCSS pseudo-class :visited