import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { layered } from '#/styles/layers';
import { components } from '#/styles/layers.css';
import { iconSize } from '#/styles/tokens.css';
const focusRing = {
outline: `2px solid ${vars.palette.primary_500}`,
outlineOffset: 2,
} as const;
export const row = style(
layered(components, {
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
gap: 8,
alignItems: 'center',
backgroundColor: vars.palette.contrast_0,
paddingTop: 12,
paddingRight: 18,
paddingBottom: 12,
paddingLeft: 6,
width: '100%',
}),
);
export const iconButton = style({
appearance: 'none',
display: 'inline-flex',
flexShrink: 0,
margin: 0,
border: 0,
borderRadius: '50%',
background: 'none',
padding: 0,
cursor: 'pointer',
selectors: {
'&:focus-visible': focusRing,
},
});
export const iconCircle = style({
boxSizing: 'border-box',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: vars.palette.contrast_25,
color: vars.palette.contrast_700,
});
export const name = style({
flex: 1,
minWidth: 0,
});
export const toggle = style({
appearance: 'none',
flexShrink: 0,
margin: 0,
border: 0,
background: 'none',
padding: 0,
cursor: 'pointer',
selectors: {
'&:focus-visible': focusRing,
},
});
export const icon = style({
width: iconSize.sm,
height: iconSize.sm,
});