@use 'sass:map';
@use 'sass:string';

/*
prop:CSSプロパティ名
important: 1 →　!important を付ける
utilities: ユーティリティクラスのセレクタと値のリスト
  'key': 'value'の配列。
  'valueがさらに配列の場合は、その中身を順番にそのまま出力（プロパティ名からかけるので--cではなくcolorにしたい場合や、複数のプロパティが必要なケースで使う）
base_type:
	0 →　なし（ユーティリティクラス以外は普通のインラインスタイルのみ）
	1 →　.-d\:{display: var(--d)} 　(メリット：importantなしでbp対応できる)
	2 → .-p, [class*='-p\:'] {padding: var(--p);} の形式で、BPクラス含めて全て変数にセットするもの。
	    常に変数で管理されるようになるので、他の処理と絡ませることがしやすい。
	    デメリット: *= は処理負荷が高い。また、途中のBPから使えるようにするにはCSS記述増える）

	3 → BPクラスには変数使わないが、文字数省略のため baseのProp classだけ変数化して *= セレクタ使う


bp:1 は基本 base_type:1. --bdw などは base_type:0.
*/

$space_values: (
	'0': '0',
	'5': 'var(--s5)',
	'10': 'var(--s10)',
	'15': 'var(--s15)',
	'20': 'var(--s20)',
	'30': 'var(--s30)',
	'40': 'var(--s40)',
	'50': 'var(--s50)',
	'60': 'var(--s60)',
	'70': 'var(--s70)',
	'80': 'var(--s80)', // '90': 'var(--s90)',
);

$ov_values: (
	'h': 'hidden',
	'a': 'auto',
	'c': 'clip',
	's': 'scroll',
);

$auto: (
	// '0': '0',
	'a': 'auto'
);

$percents_0_50_100: (
	'0': '0',
	'50\\%': '50%',
	'100\\%': '100%',
);

$place_values: (
	'c': 'center',
	's': 'start',
	'e': 'end',
	'fs': 'flex-start',
	'fe': 'flex-end',
	'str': 'stretch',
	'sb': 'space-between',
);

$place_utils: (
	items: map.remove($place_values, 'sb'),
	content: map.remove($place_values, 'str'),
	self: map.remove($place_values, 'sb', 'fs', 'fe'),
);

$props: (
	'w': (
		prop: 'width',
		utilities: (
			// 'a': 'auto',
			'fit': 'fit-content',
			'100\\%': '100%',
		),
		bp: 1,
	),
	'h': (
		prop: 'height',
		utilities: (
			// 'a': 'auto',
			'fit': 'fit-content',
			'100\\%': '100%',
			'100lvh': '100lvh',
			'100svh': '100svh',
		),
		bp: 1,
	),
	'maxW': (
		prop: 'max-width',
		utilities: (
			'100\\%': '100%',
		),
		bp: 1,
	),
	'minW': (
		prop: 'min-width',
		utilities: (
			'100\\%': '100%',
		),
		bp: 1,
	),
	'maxH': (
		prop: 'max-height',
		utilities: (
			'100\\%': '100%',
		),
		bp: 1,
	),
	'minH': (
		prop: 'min-height',
		utilities: (
			'100\\%': '100%',
			'100lvh': '100lvh',
			'100svh': '100svh',
		),
		bp: 1,
	),
	'c': (
		prop: 'color',
		// 主要カラーは変数をhoverやcolor-mixで活用するので、変数管理
		base_type: 2,
		utilities: (
			'main': 'var(--c-main)',
			'accent': 'var(--c-accent)',
			'base': 'var(--c-base)',
			'text': 'var(--c-text)',
			'text-2': 'var(--c-text-2)',
			'inherit': (
				'color': 'inherit',
			),
			'mix': (
				'--_c1': 'currentColor',
				'--_c2': 'transparent',
				'--c': 'color-mix(in srgb, var(--_c1) var(--_mixpct-c, 50%), var(--_c2))',
			),
		),
	),
	'bgc': (
		prop: 'background-color',
		base_type: 2,
		utilities: (
			'main': 'var(--c-main)',
			'accent': 'var(--c-accent)',
			'base': 'var(--c-base)',
			'base-2': 'var(--c-base-2)',
			'text': 'var(--c-text)',
			'inherit': (
				'background-color': 'inherit',
			),
			'mix': (
				'--_bgc1': 'currentColor',
				'--_bgc2': 'transparent',
				'--bgc': 'color-mix(in srgb, var(--_bgc1) var(--_mixpct-bgc, 50%), var(--_bgc2))',
			),
		),
	),
	'bdc': (
		prop: '--bdc',
		utilities: (
			'main': 'var(--c-main)',
			'accent': 'var(--c-accent)',
			'divider': 'var(--c-divider)',
			'inherit': 'inherit',
			't': 'transparent',
			'mix': (
				'--_bdc1': 'currentColor',
				'--_bdc2': 'transparent',
				'--bdc': 'color-mix(in srgb, var(--_bdc1) var(--_mixpct-bdc, 50%), var(--_bdc2))',
			),
		),
	),
	'bds': (
		prop: '--bds',
		// utilities: 'bds',
	),
	'bdw': (
		prop: '--bdw',
		base_type: 0,
		bp: 1,
	),
	'bg': (
		prop: 'background',
		bp: 1,
		utilities: (
			'n': 'none',
		),
	),
	'bgi': (
		prop: 'background-image',
		bp: 1,
	),
	'bgr': (
		prop: 'background-repeat',
		utilities: (
			'n': 'no-repeat',
		),
	),
	'bgp': (
		prop: 'background-position',
		utilities: (
			'c': 'center',
		),
	),
	'bgsz': (
		prop: 'background-size',
		utilities: (
			'cv': 'cover',
			'ct': 'contain',
		),
	),

	'f': (
		prop: 'font',
		utilities: (
			'inherit': 'inherit',
		),
	),
	'fz': (
		prop: 'font-size',
		base_type: 2,
		bp: 1,
		utilities: (
			// 'root': '1rem',
			'base': '1rem',
			'2xs': 'var(--fz-2xs)',
			'xs': 'var(--fz-xs)',
			's': 'var(--fz-s)',
			'm': 'var(--fz-m)',
			'l': 'var(--fz-l)',
			'xl': 'var(--fz-xl)',
			'2xl': 'var(--fz-2xl)',
			'3xl': 'var(--fz-3xl)',
			'4xl': 'var(--fz-4xl)',
			'5xl': 'var(--fz-5xl)',
		),
	),
	'ff': (
		prop: 'font-family',
		utilities: (
			'base': 'var(--ff-base)',
			'accent': 'var(--ff-accent)',
			'mono': 'var(--ff-mono)',
		),
	),
	'fw': (
		prop: 'font-weight',
		utilities: (
			'100': '100',
			'200': '200',
			'300': '300',
			'400': '400',
			'500': '500',
			'600': '600',
			'700': '700',
			'800': '800',
			'900': '900',
			// 'thin': 'var(--fw-thin)',
			'light': 'var(--fw-light)',
			'normal': 'var(--fw-normal)',
			// 'medium': 'var(--fw-medium)',
			'bold': 'var(--fw-bold)',
			// 'heavy': 'var(--fw-heavy)',
		),
	),
	'fs': (
		prop: 'font-style',
		utilities: (
			// 'n': 'normal',
			'i': 'italic',
		),
	),
	'lh': (
		prop: 'line-height',
		utilities: (
			'base': 'var(--lh-base)',
			'xs': 'var(--lh-xs)',
			's': 'var(--lh-s)',
			'l': 'var(--lh-l)',
			'xl': 'var(--lh-xl)',
			'1': '1',
		),
	),
	'lts': (
		prop: 'letter-spacing',
		utilities: (
			'base': 'var(--lts-base)',
			's': 'var(--lts-s)',
			'l': 'var(--lts-l)',
			// 'xl': 'var(--lts-xl)',
		),
	),
	'ta': (
		prop: 'text-align',
		utilities: (
			'l': 'left',
			'r': 'right',
			'c': 'center',
		),
	),
	'td': (
		prop: 'text-decoration',
		utilities: (
			'n': 'none',
			'u': 'underline',
		),
	),
	'd': (
		prop: 'display',
		bp: 1,
		utilities: (
			'n': 'none',
			'b': 'block',
			'f': 'flex',
			'g': 'grid',
			'i': 'inline',
			'ib': 'inline-block',
			'if': 'inline-flex',
			'ig': 'inline-grid',
		),
	),
	'v': (
		prop: 'visibility',
		utilities: (
			'h': 'hidden',
			'v': 'visible',
		),
	),
	'ov': (
		prop: 'overflow',
		utilities: $ov_values,
	),
	'ovx': (
		prop: 'overflow-x',
		utilities: $ov_values,
	),
	'ovy': (
		prop: 'overflow-y',
		utilities: $ov_values,
	),
	'ar': (
		prop: 'aspect-ratio',
		bp: 1,
		utilities: (
			'16\\/9': '16/9',
			'3\\/2': '3/2',
			'1\\/1': '1/1',
			'ogp': '1.91/1',
		),
	),
	'op': (
		prop: 'opacity',
		utilities: (
			'0': '0',
			'low': 'var(--op-low)',
			'mid': 'var(--op-mid)',
			'high': 'var(--op-high)',
		),
	),

	'bdrs': (
		prop: 'border-radius',
		base_type: 2,
		// inner などで変数使う
		bp: 1,
		utilities: (
			'0': '0',
			'5': 'var(--bdrs-5)',
			'10': 'var(--bdrs-10)',
			'20': 'var(--bdrs-20)',
			'30': 'var(--bdrs-30)',
			'40': 'var(--bdrs-40)',
			'50': 'var(--bdrs-50)',
			// '60': 'var(--bdrs-60)',
			// '70': 'var(--bdrs-70)',
			// '80': 'var(--bdrs-80)',
			'99': 'var(--bdrs-99)',
		),
	),
	'bxsh': (
		prop: 'box-shadow',
		utilities: (
			'0': '0',
			// '5': 'var(--bxsh-5)',
			'10': 'var(--bxsh-10)',
			'20': 'var(--bxsh-20)',
			'30': 'var(--bxsh-30)',
			'40': 'var(--bxsh-40)',
			'50': 'var(--bxsh-50)',
		),
	),
	'p': (
		prop: 'padding',
		base_type: 2,
		bp: 1,
		utilities: $space_values,
	),
	'px': (
		prop: 'padding-inline',
		base_type: 3,
		bp: 1,
		utilities: $space_values,
	),
	'py': (
		prop: 'padding-block',
		base_type: 3,
		bp: 1,
		utilities: $space_values,
	),
	'pt': (
		prop: 'padding-top',
		bp: 1,
	),
	'pr': (
		prop: 'padding-right',
		bp: 1,
	),
	'pb': (
		prop: 'padding-bottom',
		bp: 1,
	),
	'pl': (
		prop: 'padding-left',
		bp: 1,
	),
	'pis': (
		prop: 'padding-inline-start',
		base_type: 3,
		bp: 1,
		utilities: $space_values,
	),
	'pbs': (
		prop: 'padding-block-start',
		base_type: 3,
		bp: 1,
		utilities: $space_values,
	),
	'm': (
		prop: 'margin',
		base_type: 2,
		bp: 1,
		utilities: map.merge($auto, $space_values),
	),
	'mx': (
		prop: 'margin-inline',
		bp: 1,
		utilities: $auto,
	),
	'my': (
		prop: 'margin-block',
		bp: 1,
		utilities: $auto,
	),
	'mt': (
		prop: 'margin-top',
		bp: 1,
		utilities: $auto,
	),
	'mr': (
		prop: 'margin-right',
		bp: 1,
		utilities: $auto,
	),
	'mb': (
		prop: 'margin-bottom',
		bp: 1,
		utilities: $auto,
	),
	'ml': (
		prop: 'margin-left',
		bp: 1,
		utilities: $auto,
	),
	'mis': (
		prop: 'margin-inline-start',
		base_type: 3,
		bp: 1,
		utilities: map.merge($auto, $space_values),
	),
	'mbs': (
		prop: 'margin-block-start',
		base_type: 3,
		bp: 1,
		utilities: map.merge($auto, $space_values),
	),

	'g': (
		prop: 'gap',
		base_type: 2,
		utilities: map.merge(
				$space_values,
				(
					'inherit': (
						'gap': 'inherit',
					),
				)
			),
		bp: 1,
	),
	'gx': (
		prop: 'column-gap',
		bp: 1,
	),
	'gy': (
		prop: 'row-gap',
		bp: 1,
	),
	'pos': (
		prop: 'position',
		utilities: (
			'r': 'relative',
			'a': 'absolute',
			's': 'static',
			'f': 'fixed',
			'sti': 'sticky',
		),
	),
	'inset': (
		prop: 'inset',
		utilities: (
			'0': 0,
		),
	),
	'l': (
		prop: 'left',
		utilities: $percents_0_50_100,
	),
	't': (
		prop: 'top',
		utilities: $percents_0_50_100,
	),
	'r': (
		prop: 'right',
		utilities: $percents_0_50_100,
	),
	'b': (
		prop: 'bottom',
		utilities: $percents_0_50_100,
	),
	'z': (
		prop: 'z-index',
		utilities: (
			'99': 99,
			'2': 2,
			'1': 1,
			'0': 0,
			'-1': -1,
		),
	),
	'ord': (
		prop: 'order',
		utilities: (
			// '2': 2,
			'1': 1,
			'0': 0,
			'-1': -1,
		),
	),
	'fxw': (
		prop: 'flex-wrap',
		bp: 1,
		utilities: (
			'w': 'wrap',
			'n': 'nowrap',
		),
	),
	'fxd': (
		prop: 'flex-direction',
		bp: 1,
		utilities: (
			'c': 'column',
			'cr': 'column-reverse',
			'r': 'row',
			'rr': 'row-reverse',
		),
	),
	'fx': (
		prop: 'flex',
		bp: 1,
		utilities: (
			'1': '1',
		),
	),
	'fxsh': (
		prop: 'flex-shrink',
		utilities: (
			'0': '0',
		),
	),
	'fxg': (
		prop: 'flex-grow',
		utilities: (
			'1': '1',
		),
	),
	'fxb': (
		prop: 'flex-basis',
		bp: 1,
	),
	'gd': (
		prop: 'grid',
		bp: 1,
	),
	'gta': (
		prop: 'grid-template-areas',
		bp: 1,
	),
	'gtc': (
		prop: 'grid-template-columns',
		bp: 1,
		utilities: (
			'subgrid': 'subgrid',
		),
	),
	'gtr': (
		prop: 'grid-template-rows',
		bp: 1,
		utilities: (
			'subgrid': 'subgrid',
		),
	),
	'gaf': (
		prop: 'grid-auto-flow',
		bp: 1,
		utilities: (
			'r': 'row',
			'c': 'column',
			// 'rd': 'row dense',
			 // 'cd': 'column dense',
		),
	),
	'gac': (
		prop: 'grid-auto-columns',
		bp: 1,
	),
	'gar': (
		prop: 'grid-auto-rows',
		bp: 1,
	),
	'ga': (
		prop: 'grid-area',
		bp: 1,
		utilities: (
			'1': '1/1',
			// header, footer, body,...?
		),
	),
	'gr': (
		prop: 'grid-row',
		bp: 1,
		utilities: (
			'1\\/-1': '1/-1',
		),
	),
	'gc': (
		prop: 'grid-column',
		bp: 1,
		utilities: (
			'1\\/-1': '1/-1',
		),
	),
	'ai': (
		prop: 'align-items',
		bp: 1,
		utilities: map.get($place_utils, 'items'),
	),
	'ac': (
		prop: 'align-content',
		bp: 1,
		utilities: map.get($place_utils, 'content'),
	),
	'ji': (
		prop: 'justify-items',
		bp: 1,
		utilities: map.get($place_utils, 'items'),
	),
	'jc': (
		prop: 'justify-content',
		bp: 1,
		utilities: map.get($place_utils, 'content'),
	),
	'aslf': (
		prop: 'align-self',
		utilities: map.get($place_utils, 'self'),
	),
	'jslf': (
		prop: 'justify-self',
		utilities: map.get($place_utils, 'self'),
	),

	'trnslt': (
		prop: 'translate',
		utilities: (
			'-50X': '-50% 0',
			'-50Y': '0 -50%',
			'-50XY': '-50% -50%',
		),
	),
	'scale': (
		prop: 'scale',
		utilities: (
			'-X': '-1 1',
			'-Y': '1 -1',
			'-XY': '-1 -1',
		),
	),
	'rotate': (
		prop: 'rotate',
		utilities: (
			'45': '45deg',
			'-45': '-45deg',
			'90': '90deg',
			'-90': '-90deg',
			// '180': '180deg',
		),
	),
	'whs': (
		prop: 'white-space',
		utilities: (
			'nw': 'nowrap',
			// 'pre': 'pre',
			// 'pw': 'pre-wrap',
			 // 'pl': 'pre-line',
		),
	),
	'ovw': (
		prop: 'overflow-wrap',
		utilities: (
			'any': 'anywhere',
		),
	),
	'obf': (
		prop: 'object-fit',
		utilities: (
			'cn': 'contain',
			'cv': 'cover',
		),
	),
	'wm': (
		prop: 'writing-mode',
		utilities: (
			'v-rl': 'vertical-rl',
			// 'v-lr': 'vertical-lr',
			 // 'h-tb': 'horizontal-tb',
		),
	),
	'bxz': (
		prop: 'box-sizing',
		utilities: (
			'cb': 'content-box',
			'bb': 'border-box',
		),
	),
	'iso': (
		prop: 'isolation',
		utilities: (
			'i': 'isolate',
		),
	),
	'fl': (
		prop: 'float',
		utilities: (
			'l': 'left',
			'r': 'right',
		),
	),
	'cl': (
		prop: 'clear',
		utilities: (
			'b': 'both',
			'l': 'left',
			'r': 'right',
		),
	),
	'cols': (
		prop: '--cols',
		base_type: 0,
		bp: 1,
	),
	'rows': (
		prop: '--rows',
		base_type: 0,
		bp: 1,
	),
);

// 'grs': (
// 	prop: 'grid-row-start',
// 	base_type: 0,
// ),
// 'gcs': (
// 	prop: 'grid-column-start',
// 	base_type: 0,
// ),
// 'gre': (
// 	prop: 'grid-row-end',
// 	base_type: 0,
// ),
// 'gce': (
// 	prop: 'grid-column-end',
// 	base_type: 0,
// ),

// 'trfo': (
// 	prop: 'transform-origin',
// 	utilities: (
// 		'lt': '0% 0%',
// 		'rt': '100% 0%',
// 		'lb': '0% 100%',
// 		'rb': '100% 100%',
// 	),
// ),