import { globalStyle, style } from '@vanilla-extract/css';
import { color, config } from 'folds';

export const SequenceCardStyle = style({
  padding: config.space.S300,
});

/**
 * [Gitea #273] Several settings share one card; without a separator the next
 * tile's title read like part of the previous description. A thin line goes
 * between tiles only (not between a tile and its own slider or note).
 */
export const SettingTileGroup = style({});
// globalStyle: vanilla-extract's `selectors` may only target the element itself.
globalStyle(`${SettingTileGroup} > [data-setting-tile] ~ [data-setting-tile]`, {
  borderTop: `1px solid color-mix(in srgb, ${color.SurfaceVariant.OnContainer} 14%, transparent)`,
  paddingTop: config.space.S400,
});