@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import "../mixins/breakpoints.scss";

// Flexbox
.flex {
  display: flex !important;
  &-auto {
    flex: auto !important;
  }
  &-1 {
    flex: 1 !important;
  }
  &-2 {
    flex: 2 !important;
  }
  &-3 {
    flex: 3 !important;
  }
  &-4 {
    flex: 4 !important;
  }
}

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

.tablet-down-flex-column {
  @include media-size-down(tablet) {
    flex-direction: column !important;
  }
}

.flex-row {
  flex-direction: row !important;
  &-reversed {
    flex-direction: row-reverse !important;
  }
}

// Space Between
.space-between {
  justify-content: space-between !important;
}
// Media Size Up
.space-between-small-desktop-up {
  @include media-size-up(small-desktop) {
    justify-content: space-between !important;
  }
}
// Media Size Down
.space-between-small-desktop-down {
  @include media-size-down(small-desktop) {
    justify-content: space-between !important;
  }
}
.space-between-tablet-down {
  @include media-size-down(tablet) {
    justify-content: space-between !important;
  }
}
// Media Size Only
.space-between-mobile {
  @include media-size-only(mobile) {
    justify-content: space-between !important;
  }
}
.xs-space-between {
  @include media-size-only(mobile) {
    justify-content: space-between !important;
  }
}
.sm-space-between {
  @include media-size-only(tablet) {
    justify-content: space-between !important;
  }
}
.md-space-between {
  @include media-size-only(small-desktop) {
    justify-content: space-between !important;
  }
}
.lg-space-between {
  @include media-size-only(desktop) {
    justify-content: space-between !important;
  }
}
.xl-space-between {
  @include media-size-only(hd) {
    justify-content: space-between !important;
  }
}

.space-around {
  justify-content: space-around !important;
}

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

.align-self-center {
  align-self: center !important;
}
.align-self-start {
  align-self: flex-start !important;
}

.align-content-center {
  align-content: center !important;
}
.justify-content-center {
  justify-content: center !important;
}

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