@forward './displays';
/* flex styles */
.flex-ai-jc-center,.flex-jc-ai-center {
  @extend .d-flex;
  @extend .flex-jc-center;
  @extend .flex-ai-center;
}

$declarations: center,
flex-start,
flex-end;

$jc-properties: space-between,
space-around,
space-evenly;

$direction: "r" row,
"c" column;

@each $value in $declarations {
  .flex-ai-#{$value} {
    align-items: $value !important;
  }

  .flex-as-#{$value} {
    align-self: $value !important;
  }

  .flex-jc-#{$value} {
    justify-content: $value !important;
  }
}

@each $value in $jc-properties {
  .flex-jc-#{$value} {
    justify-content: $value !important;
  }
}

@each $name,
$value in $direction {
  .flex-d#{$name} {
    flex-direction: $value !important;
  }
}

.flex-ai-baseline {
  align-items: baseline !important;
}

.flex-ai-end {
  align-items: flex-end !important;
}

.flex-w-wrap {
  flex-wrap: wrap !important;
}

.flex-basis-1 {
  flex: 1;
}

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

.flex-none {
  flex: none;
}

/* flex styles ends */