@import '../settings/variables';
@import '../tools/mixins/grid';
@import '../tools/mixins/breakpoints';
@import '../tools/mixins/position';

.o-layout {
  display: flex;

  &--full-width {
    flex-grow: 1;
  }

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

  &--vertical {
    flex-direction: column;
  }

  &--vertical-reverse {
    flex-direction: column-reverse;
  }

  &--content-dependent {
    position: relative;
    display: inline-block;
  }

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

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

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

  &--reverse {
    flex-direction: row-reverse;
  }

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

  &--aligned {
    align-items: center;
  }

  &--conditional-vertical {
    @each $breakpoint in map-keys($grid-breakpoints) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

      &#{$infix} {
        flex-direction: column;

        @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
          flex-direction: row;
        }
      }
    }
  }

  @mixin createItem($infix) {
    &#{$infix} {
      max-width: 100%;
      flex-grow: 1;
    }

    &#{$infix}-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }

    @for $i from 1 through $columns-count {
      &#{$infix}-#{$i} {
        @include make-col($i, $columns-count);
      }
    }
  }

  &__item {
    @each $breakpoint in map-keys($grid-breakpoints) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
        @include createItem($infix);
      }
    }

    @each $breakpoint in map-keys($print-grid-breakpoints) {
      $infix: breakpoint-infix($breakpoint, $print-grid-breakpoints);

      @include media-breakpoint-up($breakpoint, $print-grid-breakpoints) {
        @media print {
          @include createItem($infix);
        }
      }
    }

    &__burger {
      @include fixed(1em, 1em, auto, auto);
    }

    &--separator {
      border-left: $hairline solid $color-separator;
    }

    &--vertical-separator {
      opacity: 0.5;
      border-top: $hairline solid $color-separator;
    }

    &--grow {
      flex: 1;
    }
  }
}