// sass-lint:disable no-important

// Standard alignment
.vl-u-align-left {
  text-align: left !important;
}

.vl-u-align-center {
  text-align: center !important;
}

.vl-u-align-right {
  text-align: right !important;
}

@each $vl-name, $vl-align in $vl-bp-list {
  @include respond-to(map-get($vl-align, media)) {
    .vl-u-align-left--#{$vl-name} {
      text-align: left !important;
    }

    .vl-u-align-center--#{$vl-name} {
      text-align: center !important;
    }

    .vl-u-align-right--#{$vl-name} {
      text-align: right !important;
    }
  }
}

// Flex align

.vl-u-flex-align-left, // Deprecated
.vl-u-flex-align-flex-start {
  align-items: flex-start !important;
}

.vl-u-flex-align-center {
  align-items: center !important;
}

.vl-u-flex-align-right, // Deprecated
.vl-u-flex-align-flex-end {
  align-items: flex-end !important;
}

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

.vl-u-flex-align-stretch {
  align-items: stretch !important;
}

.vl-u-flex-v-top, // Deprecated
.vl-u-flex-v-flex-start {
  justify-content: flex-start !important;
}

.vl-u-flex-v-center {
  justify-content: center !important;
}

.vl-u-flex-v-bottom, // Deprecated
.vl-u-flex-v-flex-end {
  justify-content: flex-end !important;
}

.vl-u-flex-v-space-between {
  justify-content: space-between !important;
}

.vl-u-flex-v-space-around {
  justify-content: space-around !important;
}

.vl-u-flex-direction-row {
  flex-direction: row !important;
}

.vl-u-flex-direction-column {
  flex-direction: column !important;
}

.vl-u-flex-direction-row-reverse {
  flex-direction: row-reverse !important;
}

.vl-u-flex-direction-column-reverse {
  flex-direction: column-reverse !important;
}

.vl-u-flex-wrap-wrap {
  flex-wrap: wrap !important;
}

.vl-u-flex-wrap-nowrap {
  flex-wrap: nowrap !important;
}

.vl-u-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

@each $vl-name, $vl-align in $vl-bp-list {
  @include respond-to(map-get($vl-align, media)) {
    .vl-u-flex-align-left--#{$vl-name} {
      align-items: flex-start !important;
    }

    .vl-u-flex-align-left--#{$vl-name}, // Deprecated
    .vl-u-flex-align-flex-start--#{$vl-name} {
      align-items: flex-start !important;
    }

    .vl-u-flex-align-center--#{$vl-name} {
      align-items: center !important;
    }

    .vl-u-flex-align-right--#{$vl-name}, // Deprecated
    .vl-u-flex-align-flex-end--#{$vl-name} {
      align-items: flex-end !important;
    }

    .vl-u-flex-align-baseline--#{$vl-name} {
      align-items: baseline !important;
    }

    .vl-u-flex-align-stretch--#{$vl-name} {
      align-items: stretch !important;
    }

    .vl-u-flex-v-top--#{$vl-name}, // Deprecated
    .vl-u-flex-v-flex-start--#{$vl-name} {
      justify-content: flex-start !important;
    }

    .vl-u-flex-v-center--#{$vl-name} {
      justify-content: center !important;
    }

    .vl-u-flex-v-bottom--#{$vl-name}, // Deprecated
    .vl-u-flex-v-flex-end--#{$vl-name} {
      justify-content: flex-end !important;
    }

    .vl-u-flex-v-space-between--#{$vl-name} {
      justify-content: space-between !important;
    }

    .vl-u-flex-v-space-around--#{$vl-name} {
      justify-content: space-around !important;
    }

    .vl-u-flex-direction-row--#{$vl-name} {
      flex-direction: row !important;
    }

    .vl-u-flex-direction-column--#{$vl-name} {
      flex-direction: column !important;
    }

    .vl-u-flex-direction-row-reverse--#{$vl-name} {
      flex-direction: row-reverse !important;
    }

    .vl-u-flex-direction-column-reverse--#{$vl-name} {
      flex-direction: column-reverse !important;
    }

    .vl-u-flex-wrap-wrap--#{$vl-name} {
      flex-wrap: wrap !important;
    }

    .vl-u-flex-wrap-nowrap--#{$vl-name} {
      flex-wrap: nowrap !important;
    }

    .vl-u-flex-wrap-reverse--#{$vl-name} {
      flex-wrap: wrap-reverse !important;
    }
  }
}