@import "mixins";

// =====================================
// layout: flex grid

//
//xm-panel
//
.xm-panel {
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  + .xm-panel {
    margin-top: 1rem;
  }
  @include set-line(top);
  @include set-line(bottom, $class: after);

  &.no-line-top, &.no-border-top {
    @include set-line(none, $class: before);
  }
  &.no-line-bottom, &.no-border-bottom {
    @include set-line(none, $class: after);
  }

}

// .xm-col
$columns: 12;
.xm-col {
  position: relative;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  min-height: 1px;
  padding-right: 1rem;
  padding-left: 1rem;
}

@for $i from 1 through 12 {
  .xm-col-#{$i} {
    position: relative;
    max-width: 100%;
    min-height: 1px;
    @include make-col($i, $columns, 2rem);
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@for $i from 1 through 12 {

  .offset-#{$i} {
    margin-left: percentage($i / $columns);
  }

}

//
//xm-row
//
.xm-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 0;
  padding-right: 0;
}

// =====================================