/**
 * Flexbox Utilities
 * Flexbox and grid alignment, direction, and sizing
 */

/* ===== Display Flex ===== */
.flex {
	display: flex;
}

/* ===== Flex Direction ===== */
.flex-row {
	flex-direction: row;
}

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

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

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

/* ===== Flex Wrap ===== */
.flex-wrap {
	flex-wrap: wrap !important;
}

#content .flex-wrap {
	flex-wrap: wrap !important;
}

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

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

/* ===== Align Items ===== */
.items-start {
	align-items: flex-start;
}

.items-end {
	align-items: flex-end;
}

.items-center {
	align-items: center !important;
}

.items-baseline {
	align-items: baseline;
}

.items-stretch {
	align-items: stretch;
}

/* ===== Align Content ===== */
.content-start {
	align-content: flex-start;
}

.content-end {
	align-content: flex-end;
}

.content-center {
	align-content: center;
}

.content-between {
	align-content: space-between;
}

.content-around {
	align-content: space-around;
}

.content-evenly {
	align-content: space-evenly;
}

/* ===== Justify Content ===== */
.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.justify-evenly {
	justify-content: space-evenly;
}

/* ===== Justify Items ===== */
.justify-items-start {
	justify-items: start;
}

.justify-items-end {
	justify-items: end;
}

.justify-items-center {
	justify-items: center;
}

.justify-items-stretch {
	justify-items: stretch;
}

/* ===== Justify Self ===== */
.justify-self-auto {
	justify-self: auto;
}

.justify-self-start {
	justify-self: start;
}

.justify-self-end {
	justify-self: end;
}

.justify-self-center {
	justify-self: center;
}

.justify-self-stretch {
	justify-self: stretch;
}

/* ===== Align Self ===== */
.self-auto {
	align-self: auto;
}

.self-start {
	align-self: flex-start;
}

.self-end {
	align-self: flex-end;
}

.self-center {
	align-self: center;
}

.self-stretch {
	align-self: stretch;
}

.self-baseline {
	align-self: baseline;
}

/* ===== Flex Grow ===== */
.grow {
	flex-grow: 1 !important;
}

.grow-0 {
	flex-grow: 0 !important;
}

.grow-unset {
	flex-grow: unset !important;
}

/* ===== Flex Shrink ===== */
.shrink {
	flex-shrink: 1;
}

.shrink-0 {
	flex-shrink: 0;
}

/* ===== Flex Basis ===== */
.basis-auto {
	flex-basis: auto;
}

.basis-content {
	flex-basis: auto !important; /* fallback */
	flex-basis: content !important;
}

.basis-full {
	flex-basis: 100%;
}

.basis-1\/2 {
	flex-basis: 50%;
}

.basis-1\/3 {
	flex-basis: 33.333333%;
}

.basis-2\/3 {
	flex-basis: 66.666667%;
}

.basis-1\/4 {
	flex-basis: 25%;
}

.basis-2\/4 {
	flex-basis: 50%;
}

.basis-3\/4 {
	flex-basis: 75%;
}

.basis-1\/5 {
	flex-basis: 20%;
}

.basis-2\/5 {
	flex-basis: 40%;
}

.basis-3\/5 {
	flex-basis: 60%;
}

.basis-4\/5 {
	flex-basis: 80%;
}

.basis-1\/6 {
	flex-basis: 16.666667%;
}

.basis-2\/6 {
	flex-basis: 33.333333%;
}

.basis-3\/6 {
	flex-basis: 50%;
}

.basis-4\/6 {
	flex-basis: 66.666667%;
}

.basis-5\/6 {
	flex-basis: 83.333333%;
}

/* Bracket notation for arbitrary values */
[class~="basis-\[20%\]"] {
	flex-basis: 20% !important;
}

[class~="basis-\[23.5%\]"] {
	flex-basis: 23.5% !important;
}

[class~="basis-\[25%\]"] {
	flex-basis: 25% !important;
}

[class~="basis-\[30%\]"] {
	flex-basis: 30% !important;
}

[class~="basis-\[40%\]"] {
	flex-basis: 40% !important;
}

/* ===== Order ===== */
.order-first {
	order: -9999;
}

.order-last {
	order: 9999;
}

.order-none {
	order: 0;
}

.order-1 {
	order: 1;
}

.order-2 {
	order: 2;
}

.order-3 {
	order: 3;
}

.order-4 {
	order: 4;
}

.order-5 {
	order: 5;
}

.order-6 {
	order: 6;
}

.order-7 {
	order: 7;
}

.order-8 {
	order: 8;
}

.order-9 {
	order: 9;
}

.order-10 {
	order: 10;
}

.order-11 {
	order: 11;
}

.order-12 {
	order: 12;
}

/* ===== Gap ===== */
.gap-0 {
	gap: 0;
}

.gap-1 {
	gap: 0.25rem;
}

.gap-2 {
	gap: 0.5rem;
}

.gap-3 {
	gap: 0.75rem;
}

.gap-4 {
	gap: 1rem;
}

.gap-5 {
	gap: 1.25rem;
}

.gap-6 {
	gap: 1.5rem;
}

.gap-7 {
	gap: 1.75rem;
}

.gap-8 {
	gap: 2rem;
}

.gap-9 {
	gap: 2.25rem;
}

.gap-10 {
	gap: 2.5rem;
}

.gap-11 {
	gap: 2.75rem;
}

.gap-12 {
	gap: 3rem;
}

/* ===== Responsive Flexbox ===== */
@media (max-width: 544px) {
	[class~="sm:flex"] {
		display: flex;
	}

	[class~="sm:flex-row"] {
		flex-direction: row;
	}

	[class~="sm:flex-col"] {
		flex-direction: column;
	}

	[class~="sm:flex-wrap"] {
		flex-wrap: wrap;
	}

	[class~="sm:items-start"] {
		align-items: flex-start;
	}

	[class~="sm:items-center"] {
		align-items: center;
	}

	[class~="sm:items-end"] {
		align-items: flex-end;
	}

	[class~="sm:justify-start"] {
		justify-content: flex-start;
	}

	[class~="sm:justify-center"] {
		justify-content: center;
	}

	[class~="sm:justify-between"] {
		justify-content: space-between;
	}

	[class~="sm:gap-2"] {
		gap: 0.5rem;
	}

	[class~="sm:gap-4"] {
		gap: 1rem;
	}

	[class~="sm:order-1"] {
		order: 1;
	}

	[class~="sm:order-2"] {
		order: 2;
	}

	[class~="sm:order-3"] {
		order: 3;
	}
}

@media (max-width: 781px) {
	[class~="md:flex"] {
		display: flex;
	}

	[class~="md:flex-row"] {
		flex-direction: row;
	}

	[class~="md:flex-column"] {
		flex-direction: column;
	}

	[class~="md:flex-wrap"] {
		flex-wrap: wrap;
	}

	[class~="md:items-start"] {
		align-items: flex-start;
	}

	[class~="md:items-center"] {
		align-items: center;
	}

	[class~="md:items-end"] {
		align-items: flex-end;
	}

	[class~="md:justify-start"] {
		justify-content: flex-start;
	}

	[class~="md:justify-center"] {
		justify-content: center !important;
	}

	[class~="md:justify-between"] {
		justify-content: space-between;
	}

	[class~="md:gap-2"] {
		gap: 0.5rem;
	}

	[class~="md:gap-4"] {
		gap: 1rem;
	}

	[class~="md:gap-6"] {
		gap: 1.5rem;
	}

	[class~="md:basis-\[40%\]"] {
		flex-basis: 40% !important;
	}

	[class~="md:order-1"] {
		order: 1;
	}

	[class~="md:order-2"] {
		order: 2;
	}

	[class~="md:order-3"] {
		order: 3;
	}
}

@media (min-width: 782px) {
	[class~="lg:flex"] {
		display: flex;
	}

	[class~="lg:flex-row"] {
		flex-direction: row;
	}

	[class~="lg:flex-col"] {
		flex-direction: column;
	}

	[class~="lg:items-start"] {
		align-items: flex-start;
	}

	[class~="lg:items-center"] {
		align-items: center;
	}

	[class~="lg:items-end"] {
		align-items: flex-end;
	}

	[class~="lg:justify-start"] {
		justify-content: flex-start;
	}

	[class~="lg:justify-center"] {
		justify-content: center;
	}

	[class~="lg:justify-between"] {
		justify-content: space-between;
	}

	[class~="lg:gap-4"] {
		gap: 1rem;
	}

	[class~="lg:gap-6"] {
		gap: 1.5rem;
	}

	[class~="lg:gap-8"] {
		gap: 2rem;
	}

	[class~="lg:order-1"] {
		order: 1;
	}

	[class~="lg:order-2"] {
		order: 2;
	}

	[class~="lg:order-3"] {
		order: 3;
	}
}

