/* https://stackoverflow.com/questions/62107074/how-to-hide-a-text-and-make-it-accessible-by-screen-reader */
.visually-hidden { 
	border: 0;
	padding: 0;
	margin: 0;
	position: absolute !important;
	height: 1px; 
	width: 1px;
	overflow: hidden;
	outline: none;
	box-shadow: none;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
	clip: rect(1px, 1px, 1px, 1px); /* maybe deprecated but we need to support legacy browsers */
	clip-path: inset(50%); /* modern browsers, clip-path works inwards from each corner */
	white-space: nowrap; /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space) */
}


/*
 DATA-FLEX

 direction       width        childrens   childrens   childrens
                              position    main axis   cross axis

 [/]-horizontal  [/]-parent   [/]-center  [/]-pack    [/]-fit
 [/] vertical    [/] content  [/] left    [/]-wrap    [/] stretch
                              [/] right   [/] nowrap
                              [/] top     [/] grow
                              [/] bottom  [/] space
                                          [/] spread
                                          [/] gap
 -> for GAP, you can custom the value with 'style="--gap:?px;"'
*/
[data-flex] {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	flex-wrap: nowrap;
}
[data-flex] > * {
	flex-grow: 0;
}
/*
 direction :		-horizontal- vertical
*/
[data-flex~="horizontal"] { flex-direction: row; }
[data-flex~="vertical"]   { flex-direction: column; }
/*
 width :		-parent- content
*/
[data-flex~="parent"]  { width: 100%; }
[data-flex~="content"] { width: fit-content; }
/*
 position :		-center- left right top bottom
*/
[data-flex~="left"]   ,[data-flex~="vertical"][data-flex~="left"]   { align-items: flex-start; text-align: left; }
[data-flex~="right"]  ,[data-flex~="vertical"][data-flex~="right"]  { align-items: flex-end; text-align: right; }
[data-flex~="top"]    ,[data-flex~="vertical"][data-flex~="top"]    { justify-content: flex-start; }
[data-flex~="bottom"] ,[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
[data-flex~="center"] ,[data-flex~="vertical"][data-flex~="center"] { align-items: center; text-align: center; }
[data-flex~="horizontal"][data-flex~="left"]   { justify-content: flex-start; }
[data-flex~="horizontal"][data-flex~="right"]  { justify-content: flex-end; }
[data-flex~="horizontal"][data-flex~="top"]    { align-items: flex-start; }
[data-flex~="horizontal"][data-flex~="bottom"] { align-items: flex-end; }
[data-flex~="horizontal"][data-flex~="center"] { }
/*
 main axis :		-pack- space spread grow wrap gap
*/
[data-flex~="pack"] > * ,[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
[data-flex~="space"]    ,[data-flex~="vertical"][data-flex~="space"]    { justify-content: space-around; }
[data-flex~="spread"]   ,[data-flex~="vertical"][data-flex~="spread"]   { justify-content: space-between; }
[data-flex~="grow"] > * ,[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
[data-flex~="horizontal"][data-flex~="pack"] > * { flex-grow: 0; }
[data-flex~="horizontal"][data-flex~="space"]    { justify-content: space-around; }
[data-flex~="horizontal"][data-flex~="spread"]   { justify-content: space-between; }
[data-flex~="horizontal"][data-flex~="grow"] > * { flex-grow: 1; }
[data-flex~="wrap"] { flex-wrap: wrap; }
/*
 cross axis :		-fit- stretch
*/
[data-flex~="horizontal"][data-flex~="fit"],
	[data-flex~="vertical"][data-flex~="fit"]      { }
[data-flex~="horizontal"][data-flex~="stretch"],
	[data-flex~="vertical"][data-flex~="stretch"]  { align-items: stretch; }