// stylelint-disable number-max-precision, selector-max-specificity, declaration-no-important, max-nesting-depth

@use 'sass:map';

$es-colors: (
	'current': 'currentColor',
	'transparent': 'transparent',
	'admin-accent': 'var(--wp-admin-theme-color, var(--es-admin-accent-color-default))',
	'accent-color-default': 'var(--es-admin-accent-color-default)',
	'pure-white': 'var(--es-admin-pure-white)',
	'pure-black': 'var(--es-admin-pure-black)',
	'gray-50': 'var(--es-admin-gray-50)',
	'gray-100': 'var(--es-admin-gray-100)',
	'gray-200': 'var(--es-admin-gray-200)',
	'gray-250': 'var(--es-admin-gray-250)',
	'gray-300': 'var(--es-admin-gray-300)',
	'gray-400': 'var(--es-admin-gray-400)',
	'gray-500': 'var(--es-admin-gray-500)',
	'gray-600': 'var(--es-admin-gray-600)',
	'gray-700': 'var(--es-admin-gray-700)',
	'gray-750': 'var(--es-admin-gray-750)',
	'gray-800': 'var(--es-admin-gray-800)',
	'gray-850': 'var(--es-admin-gray-850)',
	'gray-900': 'var(--es-admin-gray-900)',
	'gray-950': 'var(--es-admin-gray-950)',
	'red-500': 'var(--es-admin-red-500)',
	'on-red-500': 'var(--es-admin-on-red-500)',
	'yellow-500': 'var(--es-admin-yellow-500)',
	'on-yellow-500': 'var(--es-admin-on-yellow-500)',
	'green-500': 'var(--es-admin-green-500)',
	'on-green-500': 'var(--es-admin-on-green-500)',
	'blue-500': 'var(--es-admin-blue-500)',
	'on-blue-500': 'var(--es-admin-on-blue-500)',
	'blue-gray-50': 'var(--es-admin-blue-gray-50)',
	'on-blue-gray-50': 'var(--es-admin-on-blue-gray-50)',
	'cool-gray-50': 'var(--es-admin-cool-gray-50)',
	'cool-gray-100': 'var(--es-admin-cool-gray-100)',
	'cool-gray-200': 'var(--es-admin-cool-gray-200)',
	'cool-gray-300': 'var(--es-admin-cool-gray-300)',
	'cool-gray-400': 'var(--es-admin-cool-gray-400)',
	'cool-gray-450': 'var(--es-admin-cool-gray-450)',
	'cool-gray-500': 'var(--es-admin-cool-gray-500)',
	'cool-gray-600': 'var(--es-admin-cool-gray-600)',
	'cool-gray-650': 'var(--es-admin-cool-gray-650)',
	'cool-gray-700': 'var(--es-admin-cool-gray-700)',
	'cool-gray-800': 'var(--es-admin-cool-gray-800)',
	'cool-gray-900': 'var(--es-admin-cool-gray-900)',
	'eightshift-50': 'var(--es-admin-eightshift-50)',
	'eightshift-500': 'var(--es-admin-eightshift-500)',
);

$es-line-heights: (
	'0': 0,
	'0\\.75': '0.75',
	'0\\.8': '0.8',
	'0\\.85': '0.85',
	'0\\.9': '0.9',
	'0\\.95': '0.95',
	'1': 1,
	'1\\.15': '1.15',
	'1\\.2': '1.2',
	'1\\.25': '1.25',
	'1\\.3': '1.3',
	'1\\.5': '1.5',
	'2': '2',
);

$es-overflows: (
	'scroll': 'scroll',
	'visible': 'visible',
	'hidden': 'hidden',
	'auto': 'auto',
);

$es-positions: (
	'static': 'static',
	'relative': 'relative',
	'absolute': 'absolute',
	'sticky': 'sticky',
	'fixed': 'fixed',
);

$es-spacings: (
	'auto': auto,

	'0': 0,
	'px': '1px',
	'2px': '2px',
	'3px': '3px',

	'1\\/4': '25%',
	'1\\/3': '33.3%',
	'1\\/2': '50%',
	'2\\/3': '66.6%',
	'3\\/4': '75%',
	'full': '100%',

	'max': 'max-content',
	'min': 'min-content',
	'fit': 'fit-content',

	'0\\.25': '0.0625rem',
	'0\\.5': '0.125rem',
	'0\\.75': '0.1875rem',
	'1': '0.25rem',
	'1\\.25': '0.3125rem',
	'1\\.5':'0.375rem',
	'1\\.75': '0.4375rem',
	'2': '0.5rem',
	'2\\.25': '0.5625rem',
	'2\\.5':'0.625rem',
	'2\\.75': '0.6875rem',
	'3': '0.75rem',
	'3\\.25': '0.78125rem',
	'3\\.5': '0.875rem',
	'3\\.75': '0.96875rem',
	'4': '1rem',
	'4\\.5': '1.125rem',
	'5': '1.25rem',
	'5\\.5': '1.375rem',
	'6': '1.5rem',
	'6\\.5': '1.625rem',
	'7': '1.75rem',
	'7\\.5': '1.875rem',
	'8': '2rem',
	'8\\.5': '2.125rem',
	'9': '2.25rem',
	'9\\.5': '2.375rem',
	'10': '2.5rem',
	'11': '2.75rem',
	'12': '3rem',
	'13': '3.25rem',
	'14': '3.5rem',
	'15': '3.75rem',
	'16': '4rem',
	'17': '4.25rem',
	'18': '4.5rem',
	'19': '4.75rem',
	'20': '5rem',
	'21': '5.25rem',
	'22': '5.5rem',
	'23': '5.75rem',
	'24': '6rem',
	'25': '6.25rem',
	'26': '6.5rem',
	'27': '6.75rem',
	'28': '7rem',
	'29': '7.25rem',
	'30': '7.5rem',
	'31': '7.75rem',
	'32': '8rem',
	'33': '8.25rem',
	'34': '8.5rem',
	'35': '8.75rem',
	'36': '9rem',
	'37': '9.25rem',
	'38': '9.5rem',
	'39': '9.75rem',
	'40': '10rem',
	'44': '11rem',
	'48': '12rem',
	'52': '13rem',
	'56': '14rem',
	'60': '15rem',
	'64': '16rem',
	'68': '17rem',
	'72': '18rem',
	'80': '20rem',
	'84': '21rem',
	'88': '22rem',
	'92': '23rem',
	'96': '24rem',
	'100': '25rem',
	'104': '26rem',
	'108': '27rem',
	'112': '28rem',
	'116': '29rem',
	'120': '30rem',
);

$es-square-button-sizes: (
	'8': '0.5rem',
	'10': '0.625rem',
	'12': '0.75rem',
	'14': '0.875rem',
	'16': '1rem',
	'18': '1.125rem',
	'20': '1.25rem',
	'22': '1.375rem',
	'24': '1.5rem',
	'26': '1.525rem',
	'28': '1.75rem',
	'30': '1.875rem',
	'32': '2rem',
	'36': '2.25rem',
	'38': '2.375rem',
	'40': '2.5rem',
	'44': '2.75rem',
	'48': '3rem',
);

$es-text-aligns: (
	'left': 'left',
	'center': 'center',
	'right': 'right',
	'justify': 'justify',
	'stretch' : 'stretch',
);

$es-general-aligns: (
	'left': 'left',
	'center': 'center',
	'right': 'right',
	'justify': 'justify',
	'start': 'flex-start',
	'end': 'flex-end',
	'between': 'space-between',
	'around': 'space-around',
	'baseline': 'baseline',
);

$es-opacities: (
	'0': '0%',
	'10': '10%',
	'15': '15%',
	'20': '20%',
	'25': '25%',
	'30': '30%',
	'35': '35%',
	'40': '40%',
	'45': '45%',
	'50': '50%',
	'55': '55%',
	'60': '60%',
	'65': '65%',
	'70': '70%',
	'75': '75%',
	'80': '80%',
	'85': '85%',
	'90': '90%',
	'95': '95%',
	'100': '100%',
);

$es-displays: (
	'grid': 'grid',
	'flex': 'flex',
	'block': 'block',
	'inline': 'inline',
	'inline-block': 'inline-block',
	'inline-flex': 'inline-flex',
	'none': 'none',
	'contents': 'contents',
);

$es-shadows: (
	'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
	'regular': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
	'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
	'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
	'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
	'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
	'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
	'none': '0 0 rgb(0 0 0 / 0)',
);

$es-vertical-aligns: (
	'baseline': 'baseline',
	'top': 'top',
	'middle': 'middle',
	'bottom': 'bottom',
	'sub': 'sub',
	'text-top': 'text-top',
);

$es-z-indexes: (
	'1': '1',
	'2': '2',
	'3': '3',
	'4': '4',
	'5': '5',
	'10': '10',
	'20': '20',
	'30': '30',
	'40': '40',
	'50': '50',
	'100': '100',
	'200': '200',
	'500': '500',
	'1000': '1000',
	'999999': '999999',
);

$es-utility-props: (
	'border': (
		'cssProp': 'border',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'bg': (
		'cssProp': 'background',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'border-t': (
		'cssProp': 'border-block-start',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'border-b': (
		'cssProp': 'border-block-end',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'border-l': (
		'cssProp': 'border-inline-start',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'border-r': (
		'cssProp': 'border-inline-end',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'border-x': (
		'cssProp': 'border-inline',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'border-y': (
		'cssProp': 'border-block',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'mx': (
		'cssProp': 'margin-inline',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'my': (
		'cssProp': 'margin-block',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'mt': (
		'cssProp': 'margin-block-start',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'mb': (
		'cssProp': 'margin-block-end',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'ml': (
		'cssProp': 'margin-inline-start',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'mr': (
		'cssProp': 'margin-inline-end',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'm': (
		'cssProp': 'margin',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'px': (
		'cssProp': 'padding-inline',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'py': (
		'cssProp': 'padding-block',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'pt': (
		'cssProp': 'padding-block-start',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'pb': (
		'cssProp': 'padding-block-end',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'pl': (
		'cssProp': 'padding-inline-start',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'pr': (
		'cssProp': 'padding-inline-end',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'p': (
		'cssProp': 'padding',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'w': (
		'cssProp': 'inline-size',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'h': (
		'cssProp': 'block-size',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'text-align': (
		'cssProp': 'text-align',
		'values': $es-text-aligns,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'opacity': (
		'cssProp': 'opacity',
		'values': $es-opacities,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'gap': (
		'cssProp': 'gap',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'row-gap': (
		'cssProp': 'row-gap',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'col-gap': (
		'cssProp': 'column-gap',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'min-w': (
		'cssProp': 'min-width',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'min-h': (
		'cssProp': 'min-height',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'max-w': (
		'cssProp': 'max-width',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'max-h': (
		'cssProp': 'max-height',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'line-h': (
		'cssProp': 'line-height',
		'values': $es-line-heights,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'text': (
		'cssProp': 'font-size',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'rounded': (
		'cssProp': 'border-radius',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'rounded-tl': (
		'cssProp': 'border-start-start-radius',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'rounded-tr': (
		'cssProp': 'border-start-end-radius',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'rounded-bl': (
		'cssProp': 'border-end-start-radius',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'rounded-br': (
		'cssProp': 'border-end-end-radius',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'items': (
		'cssProp': 'align-items',
		'values': $es-general-aligns,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'content': (
		'cssProp': 'justify-content',
		'values': $es-general-aligns,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'align-self': (
		'cssProp': 'align-self',
		'values': $es-general-aligns,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'justify-self': (
		'cssProp': 'justify-self',
		'values': $es-general-aligns,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'display': (
		'cssProp': 'display',
		'values': $es-displays,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'hover-nested-color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':hover',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'focus-nested-color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':focus-visible',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'active-nested-color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':active',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-bg': (
		'cssProp': 'background-color',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'slight-button-border': (
		'cssProp': 'box-shadow',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': 'inset 0 0 0 1px',
		'includeNegativeValues': 'false',
	),
	'border-w': (
		'cssProp': 'border-width',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'border-color': (
		'cssProp': 'border-color',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'fill': (
		'cssProp': 'fill',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'stroke': (
		'cssProp': 'stroke',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-fill': (
		'cssProp': 'fill',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-stroke': (
		'cssProp': 'stroke',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-w': (
		'cssProp': 'width',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-h': (
		'cssProp': 'height',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-max-w': (
		'cssProp': 'max-width',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-max-h': (
		'cssProp': 'max-width',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-min-w': (
		'cssProp': 'min-width',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-min-h': (
		'cssProp': 'min-width',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-m': (
		'cssProp': 'margin',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'nested-p': (
		'cssProp': 'padding',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'nested-border': (
		'cssProp': 'border',
		'values': $es-colors,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'nested-rounded': (
		'cssProp': 'border-radius',
		'values': $es-spacings,
		'additionalSelector': 'svg',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'hover-slight-button-border': (
		'cssProp': 'box-shadow',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':hover',
		'valuePrefix': 'inset 0 0 0 1px',
		'includeNegativeValues': 'false',
	),
	'focus-slight-button-border': (
		'cssProp': 'box-shadow',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':focus-visible',
		'valuePrefix': 'inset 0 0 0 2px',
		'includeNegativeValues': 'false',
	),
	'focus-slight-button-border-wp': (
		'cssProp': 'box-shadow',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':focus',
		'valuePrefix': 'inset 0 0 0 2px',
		'includeNegativeValues': 'false',
	),
	'active-slight-button-border': (
		'cssProp': 'box-shadow',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':active',
		'valuePrefix': 'inset 0 0 0 2px',
		'includeNegativeValues': 'false',
	),
	'hover-color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':hover',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'focus-color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':focus-visible',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'active-color': (
		'cssProp': 'color',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':active',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'hover-border': (
		'cssProp': 'border',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':hover',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'focus-border': (
		'cssProp': 'border',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':focus-visible',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'active-border': (
		'cssProp': 'border',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':active',
		'valuePrefix': '1px solid',
		'includeNegativeValues': 'false',
	),
	'hover-bg': (
		'cssProp': 'background',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':hover',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'focus-bg': (
		'cssProp': 'background',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':focus-visible',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'active-bg': (
		'cssProp': 'background',
		'values': $es-colors,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':active',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'position': (
		'cssProp': 'position',
		'values': $es-positions,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'overflow': (
		'cssProp': 'overflow',
		'values': $es-overflows,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'overflow-x': (
		'cssProp': 'overflow-x',
		'values': $es-overflows,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'overflow-y': (
		'cssProp': 'overflow-y',
		'values': $es-overflows,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'top': (
		'cssProp': 'top',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'right': (
		'cssProp': 'right',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'bottom': (
		'cssProp': 'bottom',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'left': (
		'cssProp': 'left',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'inset': (
		'cssProp': 'inset',
		'values': $es-spacings,
		'additionalSelector': '',
		'includeBcfSelectors': 'true',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
	'shadow': (
		'cssProp': 'box-shadow',
		'values': $es-shadows,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'hover-shadow': (
		'cssProp': 'box-shadow',
		'values': $es-shadows,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':hover',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'focus-shadow': (
		'cssProp': 'box-shadow',
		'values': $es-shadows,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':focus-visible',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'active-shadow': (
		'cssProp': 'box-shadow',
		'values': $es-shadows,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': ':active',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'vertical-align': (
		'cssProp': 'vertical-align',
		'values': $es-vertical-aligns,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'false',
	),
	'z': (
		'cssProp': 'z-index',
		'values': $es-z-indexes,
		'additionalSelector': '',
		'includeBcfSelectors': 'false',
		'selectorSuffix': '',
		'valuePrefix': '',
		'includeNegativeValues': 'true',
	),
);

// Additional borders (default).
.es-border-none {
	border: none;
}

.es-border {
	border: 1px solid currentColor;
}

.es-border-t {
	border-block-start: 1px solid currentColor;
}

.es-border-b {
	border-block-end: 1px solid currentColor;
}

.es-border-l {
	border-inline-start: 1px solid currentColor;
}

.es-border-r {
	border-inline-end: 1px solid currentColor;
}

.es-border-x {
	border-inline: 1px solid currentColor;
}

.es-border-y {
	border-block: 1px solid currentColor;
}

// Generic utility classes (defined in maps above).
@each $propShorthand, $propData in $es-utility-props {
	$propCssName: map.get($propData, 'cssProp');
	$values: map.get($propData, 'values');
	$additionalSelector: map.get($propData, 'additionalSelector');
	$includeBcfSelectors: map.get($propData, 'includeBcfSelectors');
	$selectorSuffix: map.get($propData, 'selectorSuffix');
	$valuePrefix: map.get($propData, 'valuePrefix');
	$includeNegativeValues: map.get($propData, 'includeNegativeValues');

	@each $size, $value in $values {
		$size2: $size + '';

		.es-#{$propShorthand}-#{$size2}#{$selectorSuffix} #{$additionalSelector} {
			#{$propCssName}: #{$valuePrefix} #{$value};
		}

		.es-#{$propShorthand}-#{$size2}\!#{$selectorSuffix} #{$additionalSelector} {
			#{$propCssName}: #{$valuePrefix} #{$value} !important;
		}

		@if $includeNegativeValues == 'true' {
			.-es-#{$propShorthand}-#{$size2}#{$selectorSuffix} #{$additionalSelector} {
				#{$propCssName}: #{$valuePrefix} -#{$value};
			}

			.-es-#{$propShorthand}-#{$size2}\!#{$selectorSuffix} #{$additionalSelector} {
				#{$propCssName}: #{$valuePrefix} -#{$value} !important;
			}
		}

		// Classes for WP BaseControl fields.
		@if $includeBcfSelectors == 'true' {
			.es-#{$propShorthand}-#{$size2}-bcf#{$selectorSuffix} #{$additionalSelector} {
				.components-base-control__field,
				.components-base-control__help {
					#{$propCssName}: #{$valuePrefix} #{$value};
				}
			}

			.es-#{$propShorthand}-#{$size2}-bcf\!#{$selectorSuffix} #{$additionalSelector} {
				.components-base-control__field,
				.components-base-control__help {
					#{$propCssName}: #{$valuePrefix} #{$value} !important;
				}
			}

			.-es-#{$propShorthand}-#{$size2}-bcf#{$selectorSuffix} #{$additionalSelector} {
				.components-base-control__field,
				.components-base-control__help {
					#{$propCssName}: #{$valuePrefix} -#{$value};
				}
			}

			.-es-#{$propShorthand}-#{$size2}-bcf\!#{$selectorSuffix} #{$additionalSelector} {
				.components-base-control__field,
				.components-base-control__help {
					#{$propCssName}: #{$valuePrefix} -#{$value} !important;
				}
			}
		}
	}
}

// Special 'size' utility class (w + h).
@each $name, $value in $es-spacings {
	.es-size-#{$name} {
		block-size: #{$value};
		inline-size: #{$value};
	}

	.es-size-#{$name}\! {
		block-size: #{$value} !important;
		inline-size: #{$value} !important;
	}

	.es-min-size-#{$name} {
		min-block-size: #{$value};
		min-inline-size: #{$value};
	}

	.es-min-size-#{$name}\! {
		min-block-size: #{$value} !important;
		min-inline-size: #{$value} !important;
	}

	.es-max-size-#{$name} {
		max-block-size: #{$value};
		max-inline-size: #{$value};
	}

	.es-max-size-#{$name}\! {
		max-block-size: #{$value} !important;
		max-inline-size: #{$value} !important;
	}

	// 'nested' variants
	.es-nested-size-#{$name} svg {
		block-size: #{$value};
		inline-size: #{$value};
	}

	.es-nested-size-#{$name}\! svg {
		block-size: #{$value} !important;
		inline-size: #{$value} !important;
	}

	.es-min-size-#{$name} svg {
		min-block-size: #{$value};
		min-inline-size: #{$value};
	}

	.es-min-size-#{$name}\! svg {
		min-block-size: #{$value} !important;
		min-inline-size: #{$value} !important;
	}

	.es-max-size-#{$name} svg {
		max-block-size: #{$value};
		max-inline-size: #{$value};
	}

	.es-max-size-#{$name}\! svg {
		max-block-size: #{$value} !important;
		max-inline-size: #{$value} !important;
	}
}

@each $size, $value in $es-square-button-sizes {
	.es-button-square-#{$size} {
		width: #{$value} !important;
		height: #{$value} !important;
		min-width: #{$value} !important;
		min-height: #{$value} !important;
		padding: 0 !important;
		align-items: center;
		justify-content: center;
	}

	.es-toolbar-icon-#{$size} {
		& > button > svg {
			width: #{$value};
			height: #{$value};
		}
	}

	.es-button-icon-#{$size} {
		& > svg {
			width: #{$value};
			height: #{$value};
			flex-shrink: 0;
		}
	}
}

// Font weight utilities.
@for $i from 1 through 9 {
	.es-font-weight-#{$i * 100} {
		font-weight: #{$i * 100};
	}
}

// Default WP field spacing.
.es-has-wp-field-v-space {
	margin-block: 1.5rem;
}

.es-has-wp-field-b-space {
	margin-block-end: 1.5rem;
}

.es-has-wp-field-t-space {
	margin-block-start: 1.5rem;
}

// A11y high-visibility outline.
// Note: could override any current drop shadows!
// Please don't change the default colors, they should be hardcoded in this case!
.es-hi-vis-outline,
.es-focus-hi-vis-outline:focus {
	box-shadow: 0 0 0 1px var(--es-admin-hi-vis-outline-1, #FFFFFF), 0 0 0 2px var(--es-admin-hi-vis-outline-2, #111111);
}

// Vertical flex containers with gaps (and optional item wrapping).
.es-v-spaced {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.es-v-spaced-wrap {
	display: flex;
	gap: 0.5rem;
	flex-flow: column wrap;
}

.es-v-end {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 0.5rem;
}

.es-v-end-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.5rem;
	flex-flow: column wrap;
}

.es-v-start {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.5rem;
}

.es-v-start-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0.5rem;
	flex-flow: column wrap;
}

.es-v-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.es-v-center-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-flow: column wrap;
}

.es-v-stretch {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 0.5rem;
}

.es-v-stretch-wrap {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0.5rem;
	flex-flow: column wrap;
}

// Horizontal flex containers with gaps (and optional item wrapping).
.es-h-spaced {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.es-h-spaced-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-flow: wrap;
}

.es-h-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.es-h-between-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-flow: wrap;
}

.es-h-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}

.es-h-end-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex-flow: wrap;
}

.es-h-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
}

.es-h-start-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	flex-flow: wrap;
}

.es-h-center {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.es-h-center-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-flow: wrap;
}

.es-h-stretch {
	display: flex;
	align-items: center;
	justify-content: stretch;
	gap: 0.5rem;
}

.es-h-stretch-wrap {
	display: flex;
	align-items: center;
	justify-content: stretch;
	gap: 0.5rem;
	flex-flow: wrap;
}

// Horizontal flex containers.
.es-h-flex {
	display: flex;
	align-items: center;
}

.es-h-flex-wrap {
	display: flex;
	align-items: center;
	flex-flow: wrap;
}

.es-h-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.es-h-flex-between-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: wrap;
}

.es-h-flex-end {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.es-h-flex-end-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-flow: wrap;
}

.es-h-flex-start {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.es-h-flex-start-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-flow: wrap;
}

.es-h-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.es-h-flex-center-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: wrap;
}

.es-h-flex-stretch {
	display: flex;
	align-items: center;
	justify-content: stretch;
}

.es-h-flex-stretch-wrap {
	display: flex;
	align-items: center;
	justify-content: stretch;
	flex-flow: wrap;
}

// Vertical flex containers.
.es-v-flex {
	display: flex;
	flex-direction: column;
}

.es-v-flex-wrap {
	display: flex;
	flex-flow: column wrap;
}

.es-v-flex-end {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
}

.es-v-flex-end-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-flow: column wrap;
}

.es-v-flex-start {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.es-v-flex-start-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-flow: column wrap;
}

.es-v-flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.es-v-flex-center-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column wrap;
}

.es-v-flex-stretch {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}

.es-v-flex-stretch-wrap {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-flow: column wrap;
}

// Helper to disable default Gutenberg field spacing (e.g. for inlining input fields).
.es-no-field-spacing {
	margin-block-end: 0 !important;

	.components-base-control__field {
		margin-block-end: 0 !important;
	}
}

// Basic layouts.
.es-fifty-fifty-h {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
}

.es-fifty-fifty-auto-h {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	grid-gap: 1rem;
}

.es-fifty-fifty-h-wrap {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;

	> * {
		flex: 1 0 calc(50% - 0.5rem);
		max-width: calc(50% - 0.5rem);
	}
}

// Grid align helpers.
@for $eblCol from 1 through 12 {
	.es-col-#{$eblCol} {
		grid-column: #{$eblCol};
	}
}

@for $eblRow from 1 through 12 {
	.es-row-#{$eblRow} {
		grid-row: #{$eblRow};
	}
}

// Gutenberg Modal max-widths.
.es-modal-max-width-s {
	.components-modal__content {
		max-width: 24rem;
	}
}

.es-modal-max-width-m {
	.components-modal__content {
		max-width: 36rem;
	}
}

.es-modal-max-width-l {
	.components-modal__content {
		max-width: 40rem;
	}
}

.es-modal-max-width-xl {
	.components-modal__content {
		max-width: 44rem;
	}
}

.es-modal-max-width-xxl {
	.components-modal__content {
		max-width: 48rem;
	}
}

.es-modal-max-width-3xl {
	.components-modal__content {
		max-width: 56rem;
	}
}

.es-modal-max-width-4xl {
	.components-modal__content {
		max-width: 60rem;
	}
}

// Class to use WP admin theme color.
.es-has-wp-admin-theme-color {
	color: var(--es-admin-has-wp-admin-theme-color, var(--wp-admin-theme-color, var(--es-admin-accent-color-default)));
}

// SVG utility classes.
.es-has-animated-fill {
	transition: {
		property: fill;
		timing-function: ease-out;
		duration: 0.3s;
	}
}

.es-has-animated-stroke {
	transition: {
		property: stroke;
		timing-function: ease-out;
		duration: 0.3s;
	}
}

// Inline input-label combos.
@each $name, $value in $es-spacings {
	.es-inline-input-label-#{$name} {
		--es-gutenberg-base-control-label-margin: 0;

		.components-base-control__field {
			display: grid;
			grid-template-columns: 1fr #{$value};
		}
	}
}

// Flex utils.
.es-nested-flex-1 svg,
.es-flex-1 {
	flex: 1;
}

.es-nested-flex-0 svg,
.es-flex-0 {
	flex: 1;
}

.es-nested-flex-shrink-0 svg,
.es-flex-shrink-0 {
	flex-shrink: 0;
}

.es-nested-flex-shrink-1 svg,
.es-flex-shrink-1 {
	flex-shrink: 1;
}

.es-nested-flex-grow-0 svg,
.es-flex-grow-0 {
	flex-grow: 0;
}

.es-nested-flex-grow-1 svg,
.es-flex-grow-1 {
	flex-grow: 1;
}

.es-flex-row {
	flex-direction: row;
}

.es-flex-row-reverse {
	flex-direction: row-reverse;
}

.es-flex-col {
	flex-direction: column;
}

.es-flex-col-reverse {
	flex-direction: column-reverse;
}

.es-flex-wrap {
	flex-wrap: wrap;
}

.es-flex-nowrap {
	flex-wrap: nowrap;
}

.es-flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

// Button group.
.es-button-group {
	display: flex;
	align-items: center;
	gap: 1px;

	> .components-button {
		@include es-v2-gutenberg-button-active-state;
	}
}

// Basic transitions.
.es-custom-transition {
	transition: {
		property: var(--es-transition-property, all);
		timing-function: var(--es-transition-timing-function, var(--es-ease-out-cubic));
		duration: var(--es-transition-duration, 0.3s);
	}
}

.es-transition-all {
	transition: {
		property: all;
		timing-function: var(--es-ease-out-cubic);
		duration: 0.3s;
	}
}

.es-transition {
	transition: {
		property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
		timing-function: var(--es-ease-out-cubic);
		duration: 0.3s;
	}
}

.es-transition-colors {
	transition: {
		property: color, background-color, border-color, text-decoration-color, fill, stroke;
		timing-function: var(--es-ease-out-cubic);
		duration: 0.3s;
	}
}

.es-transition-opacity {
	transition: {
		property: opacity;
		timing-function: var(--es-ease-out-cubic);
		duration: 0.3s;
	}
}

.es-transition-shadow {
	transition: {
		property: box-shadow;
		timing-function: var(--es-ease-out-cubic);
		duration: 0.3s;
	}
}

.es-transition-transform {
	transition: {
		property: transform;
		timing-function: var(--es-ease-out-cubic);
		duration: 0.3s;
	}
}

// Pointer events / user-select.
.es-pointer-events-none {
	pointer-events: none;
}

.es-pointer-events-all {
	pointer-events: all;
}

.es-user-select-none {
	user-select: none;
}

.es-user-select-auto {
	user-select: auto;
}

.es-user-select-text {
	user-select: text;
}

// Button/link resets.
.es-button-reset {
	@extend %button-reset;
	background: none;
}

.es-link-reset {
	@extend %link-reset;
}

// Cursors.
.es-cursor-pointer {
	cursor: pointer;
}

.es-cursor-default {
	cursor: default;
}

.es-cursor-none {
	cursor: none;
}

.es-cursor-grab {
	cursor: grab;
}

.es-aspect-auto {
	aspect-ratio: auto;
}

.es-aspect-square {
	aspect-ratio: 1;
}

.es-aspect-video {
	aspect-ratio: 16 / 9;
}

.es-aspect-portrait {
	aspect-ratio: 9 / 16;
}

.es-aspect-cinema {
	aspect-ratio: 21 / 9;
}

// Word wrap.
.es-word-break-all {
	word-break: break-all;
}

.es-word-break-keep {
	word-break: keep-all;
}

.es-word-break-word {
	word-break: break-word;
}

// Object-fit.
.es-object-contain {
	object-fit: contain;
}

.es-object-cover {
	object-fit: cover;
}

.es-object-fill {
	object-fit: fill;
}

.es-object-scale-down {
	object-fit: scale-down;
}

// Text-transform.
.es-uppercase {
	text-transform: uppercase;
}

.es-normal-text {
	text-transform: none;
}

.es-lowercase {
	text-transform: lowercase;
}

.es-capitalize {
	text-transform: capitalize;
}

// Z-index.
.es-z-auto {
	z-index: auto;
}

// Isolation.
.es-isolate {
	isolation: isolate;
}

.es-isolate-auto {
	isolation: auto;
}

// Tabular nums.
.es-tabular-nums {
	font-variant-numeric: tabular-nums;
}

// Visibility: hidden.
.es-hidden {
	visibility: hidden;
}

// Special backgrounds.
.es-dots-background {
	background-color: var(--dot-background, var(--es-admin-pure-white));

	background-image:
		radial-gradient(var(--dot-color, var(--es-admin-cool-gray-450)) 1px, transparent 1px),
		radial-gradient(var(--dot-color, var(--es-admin-cool-gray-450)) 1px, var(--dot-background, var(--es-admin-pure-white)) 0.5px);

	background-size: 10px 10px;
	background-position: 2px 0, 7px 5px;
}

// Outline disable.
.es-outline-none {
	outline: none;
}

.es-outline-none\! {
	outline: none !important;
}

// stylelint-enable number-max-precision, selector-max-specificity, declaration-no-important, max-nesting-depth