// Utilities :: Flex

.u-flex {
  display: flex !important;

  &--col {
    flex-flow: column nowrap;
  }

  &--row {
    flex-flow: row nowrap !important;
  }

  &--justify-start {
    justify-content: flex-start;
  }

  &--justify-center {
    justify-content: center;
  }

  &--justify-end {
    justify-content: flex-end;
  }

  &--justify-between {
    justify-content: space-between;
  }

  &--align-center {
    align-items: center !important;
  }

  &--align-start {
    align-items: flex-start;
  }

  &--align-end {
    align-items: flex-end;
  }

  &--align-self-start {
    align-self: flex-start;
  }

  &--align-self-center {
    align-self: flex-center;
  }

  &--align-self-end {
    align-self: flex-end;
  }

  &__item {
    flex: 1;
  }

  &--centralised {
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
  }

  &--wrap {
    flex-flow: wrap;
  }
}

.u-flex-switch {
  order: 2;

  & + & {
    order: 1;
  }
}

.u-flex--column\@mobile {
  @include mq($until: city) {
    flex-direction: column;
  }
}

.u-flex\@mobile {
  @include mq($until: city) {
    display: flex;
  }
}

.u-flex--row\@mobile {
  @include mq($until: city) {
    flex-direction: row;
  }
}

.u-flex--wrap\@mobile {
  @include mq($until: city) {
    flex-wrap: wrap;
  }
}

.u-full-width {
  width: 100%;
}