/*=== Vertical alignment ===*/

.vertical--top { vertical-align: top; }
.vertical--mid { vertical-align: middle; }
.vertical--bottom { vertical-align: bottom; }

/*=== Flex ===*/

.flex:where(:not(.particle-exclude, .particle-exclude *)) {
  align-items: center;
  display: flex;

  > * {
    margin-bottom: 0;
    margin-top: 0;
  }
}

.inline-flex:where(:not(.particle-exclude, .particle-exclude *)) {
  align-items: center;
  display: inline-flex;

  > * {
    margin-bottom: 0;
    margin-top: 0;
  }
}

.flex--0 { flex: 0; }
.flex--1 { flex: 1; }
.flex--2 { flex: 2; }
.flex--3 { flex: 3; }

.flex-shrink--0 { flex-shrink: 0; }
.flex-shrink--1 { flex-shrink: 1; }
.flex-shrink--2 { flex-shrink: 2; }
.flex-shrink--3 { flex-shrink: 3; }

.flex-grow--0 { flex-grow: 0; }
.flex-grow--1 { flex-grow: 1; }
.flex-grow--2 { flex-grow: 2; }
.flex-grow--3 { flex-grow: 3; }

.align-content--around { align-content: space-around; }
.align-content--between { align-content: space-between; }
.align-content--end { align-content: flex-end; }
.align-content--center { align-content: center; }
.align-content--start { align-content: flex-start; }

.align-items--baseline { align-items: baseline; }
.align-items--center { align-items: center; }
.align-items--end { align-items: flex-end; }
.align-items--stretch { align-items: stretch; }
.align-items--start { align-items: flex-start; }

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

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

.wrap:where(:not(.particle-exclude, .particle-exclude *)) { flex-wrap: wrap; }
.wrap--reverse { flex-wrap: wrap-reverse; }


/*=== Flex child alignment ===*/
.align-self--baseline { align-self: baseline; }
.align-self--center { align-self: center; }
.align-self--end { align-self: flex-end; }
.align-self--stretch { align-self: stretch; }
.align-self--start { align-self: flex-start; }

.justify-self--baseline { justify-self: baseline; }
.justify-self--center { justify-self: center; }
.justify-self--end { justify-self: flex-end; }
.justify-self--stretch { justify-self: stretch; }
.justify-self--start { justify-self: flex-start; }

/*=== TEXT ALIGNMENT ===*/

.text-align--l  { text-align: left; }
.text-align--r  { text-align: right; }
.text-align--c  { text-align: center; }
.text-align--j  { text-align: justify; }