/*
 * Display
 */

/* .block is the note-editor block (components/editor.css); use .display-block for display: block. */
.display-block { display: block; }
.inline { display: inline-block; vertical-align: baseline; }
.inline-top { display: inline-block; vertical-align: top; }
.inline-middle { display: inline-block; vertical-align: middle; }
.inline-bottom { display: inline-block; vertical-align: text-bottom; }
.flex { display: flex; }
.flex-row { display: flex; flex-wrap: wrap; }
.flex-column { display: flex; flex-direction: column; }
.flex-grow { flex-grow: 1; }
.grid { display: grid; }
.gap-min { gap: var(--space-min); }
.gap-25 { gap: var(--space-25); }
.gap-50 { gap: var(--space-50); }
.gap-75 { gap: var(--space-75); }
.gap-100 { gap: var(--space-100); }
/* gap 125 and up, plus the in-between steps (6 / 10 / 14 / 18 / 22 px) the screens use a lot */
.gap-125 { gap: var(--space-125); }
.gap-150 { gap: var(--space-150); }
.gap-175 { gap: var(--space-175); }
.gap-200 { gap: var(--space-200); }
.gap-37 { gap: var(--space-37); }
.gap-62 { gap: var(--space-62); }
.gap-87 { gap: var(--space-87); }
.gap-112 { gap: var(--space-112); }
.gap-137 { gap: var(--space-137); }
.full-width { width: 100%; }



/*
 * Position
 */

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }



/*
 * Alignment
 */

.text-right   { text-align: right; }
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-justify { text-align: justify; }

.align-start { align-items: start; }
.align-center { align-items: center; }
.align-end { align-items: end; }

.justify-spacebetween { justify-content: space-between; }
.justify-stretch { justify-content: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }



/*
 * Text Transform
 */

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-titlecase { text-transform: capitalize; }
.text-underline { text-decoration: underline; }



/*
 *	Opacity
 */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }



/*
 *	Visibility
 */

/* -- Hide visually and from screen readers: -- */
.hidden {
	display: none !important;
}

/* Alpine: hide x-show elements until Alpine initialises and strips the attribute. */
[x-cloak] { display: none !important; }

/* -- Hide visually and from screen readers, but maintain layout -- */
.invisible {
	visibility: hidden;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.well-designed,	/* this class name is used for honeypots */
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* -- Extends the .visuallyhidden class to allow the element -- */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Selective Hide/Show
 *
 * Important!!! READ ME:
 * EACH of these helper classes are contained within their breakpoint.
 * EACH of these helper classes do not bleed across breakpoint.
 * If the element is shown by default, Then use ".hide-"
 * If the element is hidden by default, Then use ".show-"
 * 
 */
@media ( max-width: 499px ) {
	/* -- small -- */
	.hide-small { display: none !important; }
	.show-small-block { display: block !important; }
	.show-small-inline { display: inline !important; }
	.show-small-inline-block { display: inline !important; }
}
@media( min-width: 500px ) and ( max-width: 999px ) {
	/* -- medium -- */
	.hide-medium { display: none !important; }
	.show-medium-block { display: block !important; }
	.show-medium-inline { display: inline !important; }
	.show-medium-inline-block { display: inline !important; }
}
@media( min-width: 1000px ) and ( max-width: 1499px ) {
	/* -- large -- */
	.hide-large { display: none !important; }
	.show-large-block { display: block !important; }
	.show-large-inline { display: inline !important; }
	.show-large-inline-block { display: inline !important; }
}
@media( min-width: 1500px ) {
	/* -- xlarge -- */
	.hide-xlarge { display: none !important; }
	.show-xlarge-block { display: block !important; }
	.show-xlarge-inline { display: inline !important; }
	.show-xlarge-inline-block { display: inline !important; }
}



/*
 * Whitespace & Overflow
 */

.no-wrap { white-space: nowrap; }

.no-whitespace { font-size: 0; }

.no-overflow { overflow: hidden; }

.no-overflow-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.no-overflow-clip { overflow: clip; }
.overflow-clip 	  { overflow: clip; }
.overflow-x-clip  { overflow-x: clip; }
.overflow-y-clip  { overflow-y: clip; }



/*
 * Interactivity
 */

.cursor-pointer { cursor: pointer; }
.pointer        { pointer-events: auto; }
.no-pointer     { pointer-events: none; }
.unselectable   { user-select: none; }



/*
 * Background Image
 */

.img-cover {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.img-contain {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}