/* #region Grid */
.flex-row {
    display: flex;
    flex-flow: row wrap;
}

.flex-item {flex: 1;}
.flex-item-2x {flex: 2;}
.flex-item-3x {flex: 3;}
.flex-item-4x {flex: 4;}
.flex-item-5x {flex: 5;}
.flex-item-6x {flex: 6;}
/* #endregion */
  
/* #region Flex */
.flex-wrap {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}

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

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

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

.flex-order-1 {order: 1;}
.flex-order-2 {order: 2;}
.flex-order-none {order: inherit;}
/* #endregion */
  
/* #region Display */
.block {display: block;}
.inline-block {display: inline-block;}
.inline {display: inline;}
/* #endregion */
  
/* #region Borders */
.float-left {float: left;}
.float-right {float: right;}
.float-none {float: none;}
/* #endregion */
  
  /* #region Borders */
.border {border: 1px solid var(--border);}

.border-x {border-right: 1px solid var(--border); border-left: 1px solid var(--border);}
.border-y {border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}

.border-top {border-top: 1px solid var(--border);}
.border-right {border-right: 1px solid var(--border);}
.border-bottom {border-bottom: 1px solid var(--border);}
.border-left {border-left: 1px solid var(--border);}

.border-2x {border-width: var(--space-xxs);}

.border-4x {border-width: var(--space-xs);}
  /* #endregion */
  
  /* Region Border Radius*/
.height-100 {
    height: 100%;
}

.border-radius-0 {
    border-radius: 0;
}

.border-radius-xxs {
    border-radius: var(--space-xxs);
}

.border-radius-xs {
    border-radius: var(--space-xs);
}

.border-radius-s {
    border-radius: var(--space-s);
}

.border-radius-m {
    border-radius: var(--space-m);
}

.border-radius-l {
    border-radius: var(--space-l);
}

.border-radius-xl {
    border-radius: var(--space-xl);
}

.border-radius-xxl {
    border-radius: var(--space-xxl);
}
  /* Endregion Border Radius*/