/*
	PROPERTIES (the very basic first styles on the cascade)
	they are only mean to be basic values of anything, then at a later step could be overiden for when behaviour changes or is buggy
*/

/* direction */
[flair~='row'] {
	display: flex;
	flex-direction: row;

	align-content: flex-start;
	justify-content: flex-start;
	justify-items: flex-start;
	align-items: flex-start;

	/* Flexbox introduces auto as the new initial value of min-height. It makes flex items grow as tall as their contents.*/
	min-height: min-content;
	min-width: auto;
}

[flair~='col'],
[flair~='column'] {
	display: flex;
	flex-direction: column;

	align-content: flex-start;
	justify-content: flex-start;
	justify-items: flex-start;
	align-items: flex-start;

	/* Flexbox introduces auto as the new initial value of min-height. It makes flex items grow as tall as their contents.*/
	min-height: min-content;
	min-width: auto;
}

[flair~='wrap'] {
	display: flex;
	flex-wrap: wrap;
}

[flair~='no-wrap'] {
	flex-wrap: nowrap;
}

/* size */

[flair~='grow'] {
	display: flex;

	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0%;

	align-self: stretch;

	align-content: flex-start;
	justify-content: flex-start;
	justify-items: flex-start;
	align-items: flex-start;

	width: 100%;
	/*height: 100%;*/
	/*max-width: 100%;
	max-height: 100%;*/

	/* Flexbox introduces auto as the new initial value of min-height. It makes flex items grow as tall as their contents.*/
	min-height: min-content;
	min-width: auto;
}

[flair~='width'],
[flair~='full-width'] {
	width: 100%;
}

[flair~='min-width'] {
	min-width: 100%;
}
[flair~='max-width'] {
	max-width: 100%;
}

[flair~='height'],
[flair~='full-height'] {
	height: 100%;
}

[flair~='min-height'] {
	min-height: 100%;
}

[flair~='max-height'] {
	max-height: 100%;
}

/* fix container overflows parent and stuff gets aligned to the center and wont scroll properly  */
/*[flair~='FLEXBOX-BUG'],
[flair~='scroll'] > *,
[flair~='scroll-x'] > *,
[flair~='scroll-y'] > * {
	margin: auto;
}*/

[flair~='scroll-thin']::-webkit-scrollbar {
	width: 8px;
}
/* default color if not its invisible */
[flair~='scroll-thin']::-webkit-scrollbar-thumb {
	background-color: grey;
}

[flair~='scroll-thin'] {
	scrollbar-width: thin;
}

[flair~='no-scroll']::-webkit-scrollbar {
	width: 0px;
	display: none;
}

[flair~='no-scroll']::-moz-scrollbar {
	width: 0px;
	display: none;
}

/* display  */

[flair~='border-box'] {
	box-sizing: border-box;
}
[flair~='content-box'] {
	box-sizing: content-box;
}
[flair~='block'] {
	display: block;
}
[flair~='inline'] {
	display: inline;
}
[flair~='inline-block'] {
	display: inline-block;
}
[flair~='inline-flex'] {
	display: inline-flex;
}
[flair~='flex'] {
	display: flex;
}
[flair~='relative'] {
	position: relative;
}
[flair~='absolute'] {
	position: absolute;
}
[flair~='fixed'] {
	position: fixed;
}
[flair~='full'] {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}

[flair~='full-window'] {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}
[flair~='absolute-center'] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
[flair~='overflow'] {
	overflow: hidden;
}

[flair~='layer'] {
	transform: translatez(0);
}
[flair~='collapse'] {
	visibility: collapse;
}

[flair~='no-empty']::empty {
	display: none;
}

/* scroll  */

[flair~='scroll'] {
	will-change: scroll-position;
	transform: translatez(0);

	overflow: auto;

	min-height: 0;
	min-width: 0;
}
[flair~='scroll-x'] {
	will-change: scroll-position;
	transform: translatez(0);

	overflow-x: auto;
	overflow-y: hidden;

	min-width: 0;
}

[flair~='scroll-y'] {
	will-change: scroll-position;
	transform: translatez(0);

	overflow-y: auto;
	overflow-x: hidden;

	min-height: 0;
}

/* cursor  */

[flair~='cursor-hand'] {
	cursor: pointer;
}
[flair~='cursor-ignore'] {
	pointer-events: none;
}
[flair~='cursor-no-ignore'] {
	pointer-events: initial;
}

/* selection  */

[flair~='selection-none'] {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
[flair~='selection-text'] {
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	user-select: text;
}
[flair~='selection-all'] {
	-webkit-touch-callout: all;
	-webkit-user-select: all;
	user-select: all;
}

/* touch */
[draggable='false'] {
	touch-action: none;
	-webkit-user-drag: none;
}
[draggable='true'] {
	touch-action: initial;
	-webkit-user-drag: element;
}

/* text  */

[flair~='text-multiline'] {
	line-height: 1.4;
}
[flair~='text-center'] {
	text-align: center;
}
[flair~='text-left'] {
	text-align: left;
}
[flair~='text-right'] {
	text-align: right;
}
[flair~='text-crop'] {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	min-width: auto;
	min-height: min-content;
}

[flair~='text-no-wrap'] {
	white-space: nowrap;
}
[flair~='text-wrap'] {
	word-break: break-word;
	overflow-wrap: anywhere;
	/*min-height: 0;
	min-width: 0;*/
}
[flair~='text-pre'] {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
	/*min-height: 0;
	min-width: 0;*/
}
[flair~='text-bold'] {
	font-weight: bold;
}
[flair~='text-regular'] {
	font-weight: normal;
}
[flair~='text-capitalize'] {
	text-transform: capitalize;
}
[flair~='text-uppercase'] {
	text-transform: uppercase;
}
[flair~='text-underline'] {
	text-decoration: underline;
}
[flair~='text-no-underline'] {
	text-decoration: none;
}
[flair~='text-small'] {
	font-size: small;
}

/* alignment  */

[flair~='left'] {
	display: flex;
	left: 0;
}
[flair~='right'] {
	display: flex;
	right: 0;
}
[flair~='horizontal'] {
	display: flex;
}
[flair~='top'] {
	display: flex;
	top: 0;
}
[flair~='bottom'] {
	display: flex;
	bottom: 0;
}
[flair~='vertical'] {
	display: flex;
}
[flair~='center'] {
	display: flex;
}

/* spacing  */

[flair~='space-around'] {
	display: flex;
}
[flair~='space-around-horizontal'] {
	display: flex;
}
[flair~='space-around-vertical'] {
	display: flex;
}
[flair~='space-between'] {
	display: flex;
}
[flair~='space-between-horizontal'] {
	display: flex;
}
[flair~='space-between-vertical'] {
	display: flex;
}
[flair~='space-evenly'] {
	display: flex;
}
[flair~='space-evenly-horizontal'] {
	display: flex;
}
[flair~='space-evenly-vertical'] {
	display: flex;
}

/*
PROPERTIES GROUPS
the properties depend of other classes
*/

/* left */
[flair~='left'],
[flair~='row'][flair~='left'] {
	justify-content: flex-start;
	justify-items: flex-start;
}
[flair~='col'][flair~='left'],
[flair~='column'][flair~='left'] {
	align-content: flex-start;
	align-items: flex-start;
}

/* right */
[flair~='right'],
[flair~='row'][flair~='right'] {
	justify-content: flex-end;
	justify-items: flex-end;
}
[flair~='col'][flair~='right'],
[flair~='column'][flair~='right'] {
	align-content: flex-end;
	align-items: flex-end;
}

/* top */
[flair~='top'],
[flair~='row'][flair~='top'] {
	align-content: flex-start;
	align-items: flex-start;
}
[flair~='col'][flair~='top'],
[flair~='column'][flair~='top'] {
	justify-content: flex-start;
	justify-items: flex-start;
}

/* bottom */
[flair~='bottom'],
[flair~='row'][flair~='bottom'] {
	align-content: flex-end;
	align-items: flex-end;
}
[flair~='col'][flair~='bottom'],
[flair~='column'][flair~='bottom'] {
	justify-content: flex-end;
	justify-items: flex-end;
}

/* horizontal */
[flair~='horizontal'],
[flair~='row'][flair~='horizontal'] {
	justify-content: center;
	justify-items: center;
	justify-content: safe center;
	justify-items: safe center;
}

[flair~='col'][flair~='horizontal'],
[flair~='column'][flair~='horizontal'] {
	align-content: center;
	align-items: center;
	align-content: safe center;
	align-items: safe center;
}

/* vertical */
[flair~='vertical'],
[flair~='row'][flair~='vertical'] {
	align-content: center;
	align-items: center;
}

[flair~='col'][flair~='vertical'],
[flair~='column'][flair~='vertical'] {
	justify-content: center;
	justify-items: center;
}

/* center */
[flair~='center'],
[flair~='row'][flair~='center'] {
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
}
[flair~='col'][flair~='center'],
[flair~='column'][flair~='center'] {
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
}

/* space-around */
[flair~='FLEXBOX-BUG'],
[flair~='space-around'],
[flair~='row'][flair~='space-around'] {
	justify-content: space-around;
	align-content: initial; /*  this fix scroll when the item is bigger than the container, may need to be tested in colums and reverse it with justify-content*/

	justify-items: center;
	align-items: center;
}
[flair~='FLEXBOX-BUG'],
[flair~='col'][flair~='space-around'],
[flair~='column'][flair~='space-around'] {
	justify-content: space-around;
	align-content: initial; /*  this fix scroll when the item is bigger than the container, may need to be tested in colums and reverse it with justify-content*/

	justify-items: center;
	align-items: center;
}

/* space-around-horizontal */
[flair~='space-around-horizontal'],
[flair~='row'][flair~='space-around-horizontal'] {
	justify-content: space-around;
}
[flair~='col'][flair~='space-around-horizontal'],
[flair~='column'][flair~='space-around-horizontal'] {
	justify-content: space-around;
	align-content: space-around;
	justify-items: center;
	align-items: center;
}

/* space-around-vertical */
[flair~='space-around-vertical'],
[flair~='row'][flair~='space-around-vertical'] {
	align-content: space-around;
}
[flair~='col'][flair~='space-around-vertical'],
[flair~='column'][flair~='space-around-vertical'] {
	justify-content: space-around;
	align-content: space-around;
	justify-items: center;
	align-items: center;
}

/* space-between */
[flair~='FLEXBOX-BUG'],
[flair~='space-between'],
[flair~='row'][flair~='space-between'] {
	justify-content: space-between;
	align-content: initial; /* this fix scroll when the item is bigger than the container, may need to be tested in colums and reverse it with justify-content*/
	justify-items: center;
	align-items: center;
}
[flair~='FLEXBOX-BUG'],
[flair~='col'][flair~='space-between'],
[flair~='column'][flair~='space-between'] {
	justify-content: space-between;
	align-content: initial; /* this fix scroll when the item is bigger than the container, may need to be tested in colums and reverse it with justify-content*/
	justify-items: center;
	align-items: center;
}

/* space-between-horizontal */
[flair~='space-between-horizontal'],
[flair~='row'][flair~='space-between-horizontal'] {
	justify-content: space-between;
}
[flair~='col'][flair~='space-between-horizontal'],
[flair~='column'][flair~='space-between-horizontal'] {
	justify-content: space-between;
	align-content: space-between;
	justify-items: center;
	align-items: center;
}

/* space-between-vertical */
[flair~='space-between-vertical'],
[flair~='row'][flair~='space-between-vertical'] {
	align-content: space-between;
}

[flair~='col'][flair~='space-between-vertical'],
[flair~='column'][flair~='space-between-vertical'] {
	justify-content: space-between;
	align-content: space-between;
	justify-items: center;
	align-items: center;
}

/* .space-evenly */
[flair~='FLEXBOX-BUG'],
[flair~='space-evenly'],
[flair~='row'][flair~='space-evenly'] {
	justify-content: space-evenly;
	align-content: initial; /*  this fix scroll when the item is bigger than the container, may need to be tested in colums and reverse it with justify-content*/
	justify-items: center;
	align-items: center;
}
[flair~='FLEXBOX-BUG'],
[flair~='col'][flair~='space-evenly'],
[flair~='column'][flair~='space-evenly'] {
	justify-content: space-evenly;
	align-content: initial; /*    this fix scroll when the item is bigger than the container, may need to be tested in colums and reverse it with justify-content*/
	justify-items: center;
	align-items: center;
}

/* .space-evenly-horizontal */
[flair~='space-evenly-horizontal'],
[flair~='row'][flair~='space-evenly-horizontal'] {
	justify-content: space-evenly;
}
[flair~='col'][flair~='space-evenly-horizontal'],
[flair~='column'][flair~='space-evenly-horizontal'] {
	justify-content: space-evenly;
	align-content: space-evenly;
	justify-items: center;
	align-items: center;
}

/* .space-evenly-vertical */
[flair~='space-evenly-vertical'],
[flair~='row'][flair~='space-evenly-vertical'] {
	align-content: space-evenly;
}
[flair~='col'][flair~='space-evenly-vertical'],
[flair~='column'][flair~='space-evenly-vertical'] {
	justify-content: space-evenly;
	align-content: space-evenly;
	justify-items: center;
	align-items: center;
}

/*
	PROPERTIES WITH VALUES
	the values of the properties come via props
*/

[flair~='selection-color']::selection {
	color: var(--selection-color);
}
[flair~='selection-background']::selection {
	background-color: var(--selection-background);
}

[flair~='scroll-color'] {
	scrollbar-color: var(--scroll-color) var(--scroll-background);
}

/* useful */

[flair~='visible'] {
	overflow: visible;
}

[flair~='circle'] {
	border-radius: 100%;
}

[flair~='z-index'],
[flair~='z'] {
	z-index: 1;
}

[flair~='hidden'] {
	display: none;
}

[flair~='controls-none']::-webkit-media-controls-enclosure {
	display: none;
}

/* shadows */

[flair~='text-shadow'] {
	filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.5));
}

/* backgrounds */

[flair~='chess-background'] {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill-opacity=".05"><rect width="50" height="50" /><rect x="50" y="50" width="50" height="50" /></svg>')
		0 0 / 15px 15px #f8f8f8;
}

table[flair] {
	display: table;
}