/* org.css
Josh Reed 2020

Collection of flexbox-based organizational classes that come in handly alot.
*/

/* #region ######################- org Row -###################### */

/* Displays a group of things in a single row, vertically centered and evenly spaced.
   Can also be used to center stuff.*/
.org-row-spaced
{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/* Displays objects in a spaced row, aligned towards the top */
.org-row-spaced-top
{
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
}

/* Displays a group of things in a single row, vertically centered and stacked left.*/
.org-row-left
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

/* Displays a group of things in a single row, vertically centered and stacked right.*/
.org-row-right
{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* Displays a group of things in a single row, aligned to the top and stacked left.*/
.org-row-top-left
{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

/* Used to display two objects at opposite ends of a box.*/
.org-row-flung
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Displays objects in a flung row, aligned towards the top */
.org-row-flung-top
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/* Makes it so this div will extend to fill the rest of the open space in its parent
div, if its parent is a flex display, regardless of if it is a column or row */
.org-fill-rest
{
	flex-grow: 1;
}

/* #endregion */

/* #region ######################- Org Col -###################### */

/* Displays children in a horizontally centered, vertical column */
.org-col
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Displays children in a left centered, vertical column */
.org-col-left
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Displays children in a right centered, vertical column */
.org-col-right
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Horizontally centered column stacked to the bottom */
.org-col-end
{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}

/* Displays children in a horizontally centered, vertical column with space-between */
.org-col-flung
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.org-col-spaced
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.org-col-mid
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.org-col-left-flung
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

/* Use this in conjunction with org-col-full-item to make a column which takes up the entire height of the page */
.org-col-full
{
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* Items with this class inside an 'org-col-full' will take up the maximum amount of space (and equal each other) */
.org-col-full-item
{
	flex: 1;
}


/* #endregion */

/* #region ######################- Org Overtop -###################### */
/* Note: this does not mean overlay in the sense of an html region - rather these
   overtops refer to a clear div-over-another-div which do organization */

/* Parent must have width and height set *absolutely*. If either is set to 100% it will not work curiously.
   Also, the parent must have display: flex (or at least NOT whatever the default is) */
.overtop-max
{
	width: inherit; /* Inherit is strange, it seems to copy the literal width expression from the parent rather than absolute */
	height: inherit;
	position: fixed;
}

.overtop-whdef /* Overtop which intends for width and height to be set in the overtop element */
{
	position: fixed;
}

/* #endregion */

/* #region ######################- Org Other -###################### */

/* Designed to center a single object */
.org-center
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.org-center-col
{
	flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: center;
}

.org-top-left
{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

.org-top-right
{
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.org-bottom-left
{
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}

.org-bottom-right
{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.org-top-center
{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	
}

/* Display a bunch of rectangles (tiles) that wrap, left to right in rows from top to borrom */
.org-wrap-list
{
	display: flex;
	flex-wrap: wrap;
}

/* Makes a div absolutely positioned and take up the entire screen */
.org-maximized
{
	position: absolute;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	overflow: hidden;
}


/* #endregion */

/* #region ######################- Org Image -###################### */

/* Causes an image to scale-to-fit inside of a width-and-height set div */
.org-imgfit
{
	width: 100%;
	height: 100%;
}

/*  Causes an image to fit within an absolutely-sized div but preserves aspect ratio. The parent div will need 
	min-height and max-height set -____________- */
.org-imgbound
{
	max-width: 100%;
	max-height: 100%;
}

.org-icon-inline {
	position: relative;
	aspect-ratio: 1;
}

.org-icon-inline > img {
	height: 100%;
	width: 100%;
}


/* #endregion */

/* #region ######################- Org Text -###################### */

/* Causes text to exist in a single line and overflow is truncated by ... */
.org-text-trunc-ellipsis
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.org-text-trunc-ellipsis-wrap
{
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Very special org for text to make it look like a comment */
.org-text-comment
{
	color: #6a9955;
	font-family: 'PT Mono', monospace;
	font-size: 1vw;
}

.org-text-underline
{
	text-decoration: underline
}

/* #endregion */

/* #region ######################- Org General Modifiers -###################### */

/* Make it such that nothing within the element may be selected. */
/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
.org-noselect
{
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	supported by Chrome, Edge, Opera and Firefox */
}

.org-noselect img
{
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
}

/* #endregion */