module.exports = {
	prefix: 'sw-',
	content: ['./assets/src/**/*.{js,jsx,ts,tsx}'],
	theme: {
		extend: {
			spacing: {
				128: '32rem',
				256: '64rem',
			},
			colors: {
				'sb-blue': '#0068A0',
				'sb-blue-hover': '#2a81b0',
				'sb-blue-light': '#0096CC',
				'sb-blue-darker': '#005288',
				'sb-blue-darkest': '#2C324C',
				'sb-orange': '#E34F0E',
				'sb-orange-darker': '#ff5b0e',
				'sb-gray': '#8C8F9A',
				'sb-gray-2': '#696D80',
				'sb-gray-3': '#E6E6EB',
				'sb-neutral': '#F3F4F5',
				'sb-border': '#D0D1D7',
				'sb-hover-blue': '#0096CC',
				'sb-hover-gray': '#F3F4F5',
				'sb-bg-alert': '#fceded',
				'sb-color-alert': '#841919'
			},
			boxShadow: {
				sb: '0px 1px 2px rgba(0, 0, 0, 0.05), 0px 4px 5px rgba(0, 0, 0, 0.05)',
				sb2: '0px 2px 5px rgba(60, 66, 87, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.12)',
				sb3: '0px 2px 5px rgba(60, 66, 87, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.08), inset 0px -1px 1px rgba(0, 0, 0, 0.12);',
				sb4: '0px 2px 5px rgba(60, 66, 87, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.05), inset 0px -1px 1px rgba(0, 0, 0, 0.12);',
				sb5: '0px 2px 5px rgba(60, 66, 87, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.08);',
				sb6: 'box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04);'
			},
			width: {
			  'feed-box-overflow': 'calc(100% + 16px)',
			},
			height: {
			  'feed-box-overflow': 'calc(18rem + 16px)',
			}
		},
	},
	plugins: [],
};