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


/**
 * Rows and Columns
 */

[class*="md-layout"] {
  display: flex;
  flex: 1;

  &.md-centered {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  @include md-rows-and-md-columns();
  @include md-layout-align();
  @include md-flex();

  @include md-layout-xlarge {
    @include md-breakpoint-layout(xlarge);
  }

  @include md-layout-large {
    @include md-breakpoint-layout(large);
  }

  @include md-layout-medium {
    @include md-breakpoint-layout(medium);
  }

  @include md-layout-small {
    @include md-breakpoint-layout(small);
  }

  @include md-layout-xsmall {
    @include md-breakpoint-layout(xsmall);
  }

  @include md-layout-large-and-up {
    @include md-breakpoint-layout(large-and-up);
  }

  @include md-layout-medium-and-up {
    @include md-breakpoint-layout(medium-and-up);
  }

  @include md-layout-small-and-up {
    @include md-breakpoint-layout(small-and-up);
  }

  @include md-layout-xsmall-and-up {
    @include md-breakpoint-layout(xsmall-and-up);
  }
}

@include md-gutter($md-gutter-large);

@include md-layout-medium {
  @include md-gutter($md-gutter-medium);
}

@include md-layout-small {
  @include md-gutter($md-gutter-small);
}

@include md-layout-xsmall {
  @include md-gutter($md-gutter-xsmall);
}

@include md-layout-large {
  @include md-gutter($md-gutter-large, large);
}

@include md-layout-medium {
  @include md-gutter($md-gutter-medium, medium);
}

@include md-layout-small {
  @include md-gutter($md-gutter-small, small);
}

@include md-layout-xsmall {
  @include md-gutter($md-gutter-xsmall, xsmall);
}

@include md-layout-large {
  @include md-hide(large)
}

@include md-layout-medium {
  @include md-hide(medium)
}

@include md-layout-small {
  @include md-hide(small)
}

@include md-layout-xsmall {
  @include md-hide(xsmall)
}