import { createStyle } from '@gluestack-style/react';
export const PopoverCloseButton = createStyle({
'zIndex': 1,
'p': '$2',
'rounded': '$sm',
'_icon': {
color: '$backgroundLight400',
},
'_text': {
color: '$backgroundLight400',
},
':hover': {
_icon: {
color: '$backgroundLight700',
},
_text: {
color: '$backgroundLight700',
},
},
':active': {
_icon: {
color: '$backgroundLight900',
},
_text: {
color: '$backgroundLight900',
},
},
'_dark': {
'_icon': {
color: '$backgroundDark400',
},
'_text': {
color: '$backgroundDark400',
},
':hover': {
_icon: {
color: '$backgroundDark200',
},
_text: {
color: '$backgroundDark200',
},
},
':active': {
_icon: {
color: '$backgroundDark100',
},
_text: {
color: '$backgroundDark100',
},
},
},
':focusVisible': {
bg: '$backgroundLight100',
_icon: {
color: '$backgroundLight900',
},
_text: {
color: '$backgroundLight900',
},
_dark: {
bg: '$backgroundDark700',
_icon: {
color: '$backgroundLight100',
},
_text: {
color: '$backgroundLight100',
},
},
},
'_web': {
outlineWidth: 0,
cursor: 'pointer',
},
});