import { style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';
import { layered } from '#/styles/layers';
import { components } from '#/styles/layers.css';
import { borderRadius, space } from '#/styles/tokens.css';
export const toolbar = style({
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
gap: space.sm,
});
export const group = style({
display: 'flex',
flexShrink: 0,
alignItems: 'center',
gap: space._2xs,
});
export const zoomGroup = style([
group,
{
gap: space.sm,
marginInlineStart: 'auto',
},
]);
export const ratioTrigger = style(
layered(components, {
gap: space.xs,
selectors: {
'&[data-popup-open]': { backgroundColor: vars.palette.contrast_100 },
},
}),
);
export const slider = style({
width: 120,
});
export const sliderControl = style({
display: 'flex',
alignItems: 'center',
height: 24,
touchAction: 'none',
cursor: 'pointer',
userSelect: 'none',
selectors: {
'&[data-disabled]': { opacity: 0.5, cursor: 'default' },
},
});
export const sliderTrack = style({
position: 'relative',
borderRadius: borderRadius.full,
backgroundColor: vars.palette.contrast_100,
width: '100%',
height: 4,
});
export const sliderIndicator = style({
borderRadius: borderRadius.full,
backgroundColor: vars.palette.primary_500,
});
export const sliderThumb = style({
borderRadius: borderRadius.full,
backgroundColor: vars.palette.primary_500,
width: 14,
height: 14,
transition: 'scale 0.1s ease',
selectors: {
// widen the pointer target past the visible thumb, as the video sliders do
'&::after': { content: '""', position: 'absolute', inset: -8 },
'&:has(:focus-visible)': { outline: `2px solid ${vars.palette.primary_500}`, outlineOffset: 2 },
[`${sliderControl}[data-dragging] &`]: { scale: '1.2' },
},
});