// Prefix: use empty string if you don't want any prefix
$atom-prefix: '_';

/*
 * Color
 *********************************************/

/* Generate background-color class
	=> _bgcl-[key]
*/
$background-colors: (
	'primary': hsl(var(--hsl-primary) / var(--bgcl-opacity)),
	'primary-active': hsl(var(--hsl-primary-active) / var(--bgcl-opacity)),
	'primary-content': hsl(var(--hsl-primary-content) / var(--bgcl-opacity)),
	'accent': hsl(var(--hsl-accent) / var(--bgcl-opacity)),
	'accent-active': hsl(var(--hsl-accent-active) / var(--bgcl-opacity)),
	'accent-content': hsl(var(--hsl-accent-content) / var(--bgcl-opacity)),
	'base-100': hsl(var(--hsl-base-100) / var(--bgcl-opacity)),
	'base-200': hsl(var(--hsl-base-200) / var(--bgcl-opacity)),
	'base-300': hsl(var(--hsl-base-300) / var(--bgcl-opacity)),
	'base-400': hsl(var(--hsl-base-400) / var(--bgcl-opacity)),
	'line': hsl(var(--hsl-line) / var(--bgcl-opacity)),
	'content': hsl(var(--hsl-content) / var(--bgcl-opacity)),
	'content-inv': hsl(var(--hsl-content-inv) / var(--bgcl-opacity)),
	'positive': hsl(var(--hsl-positive) / var(--bgcl-opacity)),
	'positive-content': hsl(var(--hsl-positive-content) / var(--bgcl-opacity)),
	'negative': hsl(var(--hsl-negative) / var(--bgcl-opacity)),
	'negative-content': hsl(var(--hsl-negative-content) / var(--bgcl-opacity)),
	'warning': hsl(var(--hsl-warning) / var(--bgcl-opacity)),
	'warning-content': hsl(var(--hsl-warning-content) / var(--bgcl-opacity)),
	'info': hsl(var(--hsl-info) / var(--bgcl-opacity)),
	'info-content': hsl(var(--hsl-info-content) / var(--bgcl-opacity)),
	'black': hsl(var(--hsl-black) / var(--bgcl-opacity)),
	'white': hsl(var(--hsl-white) / var(--bgcl-opacity)),
	'tpr': transparent,
	'crcl': currentColor,
	'ihr': inherit,
	'us': unset,
);

/* Generate color class
	=> _cl-[key]
*/
$colors: (
	'primary': hsl(var(--hsl-primary) / var(--cl-opacity)),
	'primary-active': hsl(var(--hsl-primary-active) / var(--cl-opacity)),
	'primary-content': hsl(var(--hsl-primary-content) / var(--cl-opacity)),
	'accent': hsl(var(--hsl-accent) / var(--cl-opacity)),
	'accent-active': hsl(var(--hsl-accent-active) / var(--cl-opacity)),
	'accent-content': hsl(var(--hsl-accent-content) / var(--cl-opacity)),
	'base-100': hsl(var(--hsl-base-100) / var(--cl-opacity)),
	'base-200': hsl(var(--hsl-base-200) / var(--cl-opacity)),
	'base-300': hsl(var(--hsl-base-300) / var(--cl-opacity)),
	'base-400': hsl(var(--hsl-base-400) / var(--cl-opacity)),
	'line': hsl(var(--hsl-line) / var(--cl-opacity)),
	'content': hsl(var(--hsl-content) / var(--cl-opacity)),
	'content-inv': hsl(var(--hsl-content-inv) / var(--cl-opacity)),
	'positive': hsl(var(--hsl-positive) / var(--cl-opacity)),
	'positive-content': hsl(var(--hsl-positive-content) / var(--cl-opacity)),
	'negative': hsl(var(--hsl-negative) / var(--cl-opacity)),
	'negative-content': hsl(var(--hsl-negative-content) / var(--cl-opacity)),
	'warning': hsl(var(--hsl-warning) / var(--cl-opacity)),
	'warning-content': hsl(var(--hsl-warning-content) / var(--cl-opacity)),
	'info': hsl(var(--hsl-info) / var(--cl-opacity)),
	'info-content': hsl(var(--hsl-info-content) / var(--cl-opacity)),
	'black': hsl(var(--hsl-black) / var(--cl-opacity)),
	'white': hsl(var(--hsl-white) / var(--cl-opacity)),
	'tpr': transparent,
	'crcl': currentColor,
	'ihr': inherit,
	'us': unset,
);

/* Generate border-color class
	=> _bdcl-[key]
*/
$border-colors: (
	'primary': hsl(var(--hsl-primary) / var(--bdcl-opacity)),
	'primary-active': hsl(var(--hsl-primary-active) / var(--bdcl-opacity)),
	'primary-content': hsl(var(--hsl-primary-content) / var(--bdcl-opacity)),
	'accent': hsl(var(--hsl-accent) / var(--bdcl-opacity)),
	'accent-active': hsl(var(--hsl-accent-active) / var(--bdcl-opacity)),
	'accent-content': hsl(var(--hsl-accent-content) / var(--bdcl-opacity)),
	'base-100': hsl(var(--hsl-base-100) / var(--bdcl-opacity)),
	'base-200': hsl(var(--hsl-base-200) / var(--bdcl-opacity)),
	'base-300': hsl(var(--hsl-base-300) / var(--bdcl-opacity)),
	'base-400': hsl(var(--hsl-base-400) / var(--bdcl-opacity)),
	'line': hsl(var(--hsl-line) / var(--bdcl-opacity)),
	'content': hsl(var(--hsl-content) / var(--bdcl-opacity)),
	'content-inv': hsl(var(--hsl-content-inv) / var(--bdcl-opacity)),
	'positive': hsl(var(--hsl-positive) / var(--bdcl-opacity)),
	'positive-content': hsl(var(--hsl-positive-content) / var(--bdcl-opacity)),
	'negative': hsl(var(--hsl-negative) / var(--bdcl-opacity)),
	'negative-content': hsl(var(--hsl-negative-content) / var(--bdcl-opacity)),
	'warning': hsl(var(--hsl-warning) / var(--bdcl-opacity)),
	'warning-content': hsl(var(--hsl-warning-content) / var(--bdcl-opacity)),
	'info': hsl(var(--hsl-info) / var(--bdcl-opacity)),
	'info-content': hsl(var(--hsl-info-content) / var(--bdcl-opacity)),
	'black': hsl(var(--hsl-black) / var(--bdcl-opacity)),
	'white': hsl(var(--hsl-white) / var(--bdcl-opacity)),
	'tpr': transparent,
	'crcl': currentColor,
	'ihr': inherit,
	'us': unset,
);

/* Generate opacity class
	=> _opct-[key]
Also use for generate color opacity class
	=> _cl-opacity-[key], _bgcl-opacity-[key], _bdcl-opacity-[key]
 */
$opacity: (
	'0': 0,
	'5': 0.05,
	'10': 0.1,
	'15': 0.15,
	'20': 0.2,
	'25': 0.25,
	'30': 0.3,
	'35': 0.35,
	'40': 0.4,
	'45': 0.45,
	'50': 0.5,
	'55': 0.55,
	'60': 0.6,
	'65': 0.65,
	'70': 0.7,
	'75': 0.75,
	'80': 0.8,
	'85': 0.85,
	'90': 0.9,
	'95': 0.95,
	'100': 1,
);

/* Generate border-radius class
	=> _bdrd-[key], _bdtrrd-[key], _bdtlrd-[key], _bdbtrrd-[key], _bdbtlrd-[key]
 */
$border-radius: (
	'0': var(--spc-0),
	'1': var(--spc-1),
	'2': var(--spc-2),
	'3': var(--spc-3),
	'4': var(--spc-4),
	'5': var(--spc-5),
	'6': var(--spc-6),
	'7': var(--spc-7),
	'8': var(--spc-8),
	'9': var(--spc-9),
	'10': var(--spc-10),
	'11': var(--spc-11),
	'12': var(--spc-12),
	'13': var(--spc-13),
	'50pct': 50%,
	'100pct': 100%,
	'at': auto,
	'us': unset,
	'ihr': inherit,
	'max': 9999px,
);

/*Generate margin / padding class
	=> _mg-[key], _mgt-[key], _mgr-[key], _mgl-[key], _mgbt-[key], _mgv-[key], _mgh-[key]
	=> _pd-[key], _pdt-[key], _pdr-[key], _pdl-[key], _pdbt-[key], _pdv-[key], _pdh-[key]
 */
$margin_padding: (
	'0': var(--spc-0),
	'1': var(--spc-1),
	'2': var(--spc-2),
	'3': var(--spc-3),
	'4': var(--spc-4),
	'5': var(--spc-5),
	'6': var(--spc-6),
	'7': var(--spc-7),
	'8': var(--spc-8),
	'9': var(--spc-9),
	'10': var(--spc-10),
	'11': var(--spc-11),
	'12': var(--spc-12),
	'13': var(--spc-13),
	'50pct': 50%,
	'100pct': 100%,
	'at': auto,
	'us': unset,
	'ihr': inherit,
);

/* Generate width/height class
	=> _w-[key], _mnw-[key], _mxw-[key]
	=> _h-[key], _mnh-[key], _mxh-[key]
 */
$width_height: (
	'0': var(--spc-0),
	'1': var(--spc-1),
	'2': var(--spc-2),
	'3': var(--spc-3),
	'4': var(--spc-4),
	'5': var(--spc-5),
	'6': var(--spc-6),
	'7': var(--spc-7),
	'8': var(--spc-8),
	'9': var(--spc-9),
	'10': var(--spc-10),
	'11': var(--spc-11),
	'12': var(--spc-12),
	'13': var(--spc-13),
	'50pct': 50%,
	'100pct': 100%,
	'at': auto,
	'us': unset,
	'ihr': inherit,
	'100vw': 100vw,
	'100vh': 100vh,
);

/* Generate positional class
	=> _t-[key], _r-[key], _bt-[key], _l-[key]
 */
$top_right_bottom_left: (
	'0': var(--spc-0),
	'1': var(--spc-1),
	'2': var(--spc-2),
	'3': var(--spc-3),
	'4': var(--spc-4),
	'5': var(--spc-5),
	'6': var(--spc-6),
	'7': var(--spc-7),
	'8': var(--spc-8),
	'9': var(--spc-9),
	'10': var(--spc-10),
	'11': var(--spc-11),
	'12': var(--spc-12),
	'13': var(--spc-13),
	'50pct': 50%,
	'100pct': 100%,
	'at': auto,
	'us': unset,
	'ihr': inherit,
);

/* Generate gap class
	=> _g-[key]
 */
$gap: (
	'0': var(--spc-0),
	'1': var(--spc-1),
	'2': var(--spc-2),
	'3': var(--spc-3),
	'4': var(--spc-4),
	'5': var(--spc-5),
	'6': var(--spc-6),
	'7': var(--spc-7),
	'8': var(--spc-8),
	'9': var(--spc-9),
	'10': var(--spc-10),
	'11': var(--spc-11),
	'12': var(--spc-12),
	'13': var(--spc-13),
	'us': unset,
	'ihr': inherit,
);

/* Generate border-width class
	=> _bdw-[key], _bdtw-[key], _bdrw-[key], _bdbtw-[key], _bdlw-[key]
 */
$border-width: (
	'0': var(--spc-0),
	'1': var(--spc-1),
	'2': var(--spc-2),
	'3': var(--spc-3),
	'4': var(--spc-4),
	'5': var(--spc-5),
	'6': var(--spc-6),
	'7': var(--spc-7),
	'8': var(--spc-8),
	'9': var(--spc-9),
	'10': var(--spc-10),
	'11': var(--spc-11),
	'12': var(--spc-12),
	'13': var(--spc-13),
	'at': auto,
	'us': unset,
	'ihr': inherit,
);

/* Generate font-family class
	=> _ffml-[key]
 */
$font-families: (
	'primary': var(--ffml-primary),
	'secondary': var(--ffml-secondary),
);

/* Generate font-size class
	=> _fs-[key]
 */
$font-sizes: (
	'1': var(--fs-1),
	'2': var(--fs-2),
	'3': var(--fs-3),
	'4': var(--fs-4),
	'5': var(--fs-5),
	'6': var(--fs-6),
	'7': var(--fs-7),
	'8': var(--fs-8),
	'9': var(--fs-9),
	'10': var(--fs-10),
	'11': var(--fs-11),
	'12': var(--fs-12),
	'13': var(--fs-13),
	'14': var(--fs-14),
);

/* Generate font-weight class
	=> _fw-[key]
 */
$font-weights: (
	'100': 100,
	'200': 200,
	'300': 300,
	'400': 400,
	'500': 500,
	'600': 600,
	'700': 700,
	'800': 800,
	'900': 900,
);

/* Generate line-height class
	=> _lh-[key]
 */
$line-heights: (
	'1': 1,
	'2': 1.15,
	'3': 1.25,
	'4': 1.5,
	'5': 1.65,
);

/* Responsive lower bound breakpoint for :sm :md :lg class attributes */
$sm: 768px;
$md: 1024px;
$lg: 1280px;

$breakpoints: (
	'sm': $sm,
	'md': $md,
	'lg': $lg,
);