general.import.less

.flex {
	display: flex;
	&-row-wrap {flex-flow: row wrap;}
	&-row-nowrap {flex-flow: row nowrap;}
	&-row-reverse {flex-direction: row-reverse;}
	&-column {flex-flow: column;}
	&-column-reverse {flex-direction: column-reverse;}
}

.grid {
    --minimum-col-size: 100px;

    display: grid;

    &-col {
        &-auto-fill {grid-template-columns: repeat(auto-fill, minmax(var(--minimum-col-size), 1fr));}
        &-auto-fit {grid-template-columns: repeat(auto-fit, minmax(var(--minimum-col-size), 1fr));}
        &-1 {grid-template-columns: 1fr;}
        &-2 {grid-template-columns: repeat(2, minmax(var(--minimum-col-size), 1fr));}
        &-3 {grid-template-columns: repeat(3, minmax(var(--minimum-col-size), 1fr));}
        &-4 {grid-template-columns: repeat(4, minmax(var(--minimum-col-size), 1fr));}
        &-5 {grid-template-columns: repeat(5, minmax(var(--minimum-col-size), 1fr));}
        &-6 {grid-template-columns: repeat(6, minmax(var(--minimum-col-size), 1fr));}
    }
}

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

    &-self {
        &-center {align-self: center;}
        &-start {align-self: start;}
        &-end {align-self: end;}
    }
}

.justify {
    &-center {justify-content: center;}
    &-start {justify-content: start;}
    &-end {justify-content: end;}
    &-space-between {justify-content: space-between;}
    &-space-around {justify-content: space-around;}
    &-space-evenly {justify-content: space-evenly;}
}

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

/**
	For use with flexbox and grid layouts
	Will apply a gap on the vertical and horizontal axis unless otherwise specified
 */
.gap {
	&-4 { gap: 4px; }
	&-8 { gap: 8px; }
	&-16 { gap: 16px; }
	&-24 { gap: 24px; }
	&-48 { gap: 48px; }
}

.container {
	&-300 { max-width: 300px; }
	&-500 { max-width: 500px; }
	&-700 { max-width: 700px; }
	&-900 { max-width: 900px; }
	&-1100 { max-width: 1100px; }
	&-centered { margin-left: auto; margin-right: auto; }
	&-padded { padding: 8px; }
}

.padding {
	&-4 { padding: 4px; }
	&-8 { padding: 8px; }
	&-12 { padding: 12px; }
	&-16 { padding: 16px; }
	&-24 { padding: 24px; }
	&-32 { padding: 32px; }
	&-64 { padding: 64px; }

	&-top { padding-top: 8px; }
	&-bottom { padding-bottom: 8px; }
	&-right { padding-right: 8px; }
	&-left { padding-left: 8px; }
}

.font {
	&-100 { font-weight: 100; }
	&-200 { font-weight: 200; }
	&-300 { font-weight: 300; }
	&-400 { font-weight: 400; }
	&-500 { font-weight: 500; }
	&-600 { font-weight: 600; }
	&-700 { font-weight: 700; }
	&-800 { font-weight: 800; }
	&-900 { font-weight: 900; }
	&-italic { font-style: italic; }
}

.positive-lighter { color: var(--positive-lighter); }
.positive-light { color: var(--positive-light); }
.positive { color: var(--positive); }
.positive-dark { color: var(--positive-dark); }
.positive-darker { color: var(--positive-darker); }

.balanced-lighter { color: var(--balanced-lighter); }
.balanced-light { color: var(--balanced-light); }
.balanced { color: var(--balanced); }
.balanced-dark { color: var(--balanced-dark); }
.balanced-darker { color: var(--balanced-darker); }

.assertive-lighter { color: var(--assertive-lighter); }
.assertive-light { color: var(--assertive-light); }
.assertive { color: var(--assertive); }
.assertive-dark { color: var(--assertive-dark); }
.assertive-darker { color: var(--assertive-darker); }

.energized-lighter { color: var(--energized-lighter); }
.energized-light { color: var(--energized-light); }
.energized { color: var(--energized); }
.energized-dark { color: var(--energized-dark); }
.energized-darker { color: var(--energized-darker); }

.juicy-lighter { color: var(--juicy-lighter); }
.juicy-light { color: var(--juicy-light); }
.juicy { color: var(--juicy); }
.juicy-dark { color: var(--juicy-dark); }
.juicy-darker { color: var(--juicy-darker); }

.lighter { color: var(--lighter); }
.light { color: var(--light); }
.dark { color: var(--dark); }
.darker { color: var(--darker); }

.bg-positive-lighter { background-color: var(--positive-lighter); }
.bg-positive-light { background-color: var(--positive-light); }
.bg-positive { background-color: var(--positive); }
.bg-positive-dark { background-color: var(--positive-dark); }
.bg-positive-darker { background-color: var(--positive-darker); }

.bg-balanced-lighter { background-color: var(--balanced-lighter); }
.bg-balanced-light { background-color: var(--balanced-light); }
.bg-balanced { background-color: var(--balanced); }
.bg-balanced-dark { background-color: var(--balanced-dark); }
.bg-balanced-darker { background-color: var(--balanced-darker); }

.bg-assertive-lighter { background-color: var(--assertive-lighter); }
.bg-assertive-light { background-color: var(--assertive-light); }
.bg-assertive { background-color: var(--assertive); }
.bg-assertive-dark { background-color: var(--assertive-dark); }
.bg-assertive-darker { background-color: var(--assertive-darker); }

.bg-energized-lighter { background-color: var(--energized-lighter); }
.bg-energized-light { background-color: var(--energized-light); }
.bg-energized { background-color: var(--energized); }
.bg-energized-dark { background-color: var(--energized-dark); }
.bg-energized-darker { background-color: var(--energized-darker); }

.bg-juicy-lighter { background-color: var(--juicy-lighter); }
.bg-juicy-light { background-color: var(--juicy-light); }
.bg-juicy { background-color: var(--juicy); }
.bg-juicy-dark { background-color: var(--juicy-dark); }
.bg-juicy-darker { background-color: var(--juicy-darker); }

.bg-lighter { background-color: var(--lighter); }
.bg-light { background-color: var(--light); }
.bg-dark { background-color: var(--dark); }
.bg-darker { background-color: var(--darker); }

.hid {display: none;}