@import 'mixins/tools.mediaqueries';
@import 'mixins/objects.grid';

.o-grid {
  @include screen--xsmall-only {
    &.o-grid--xsmall-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
      @include grid__cell--fit;
    }

    &.o-grid--xsmall-full {
      @include grid--full;
    }

    &.o-grid--xsmall-full > .o-grid__cell {
      @include grid__cell--full;
    }
  }

  @include screen--small-only {
    &.o-grid--small-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
      @include grid__cell--fit;
    }

    &.o-grid--small-full {
      @include grid--full;
    }

    &.o-grid--small-full > .o-grid__cell {
      @include grid__cell--full;
    }
  }

  @include screen--medium-only {
    &.o-grid--medium-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
      @include grid__cell--fit;
    }

    &.o-grid--medium-full {
      @include grid--full;
    }

    &.o-grid--medium-full > .o-grid__cell {
      @include grid__cell--full;
    }
  }

  @include screen--large-only {
    &.o-grid--large-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
      @include grid__cell--fit;
    }

    &.o-grid--large-full {
      @include grid--full;
    }

    &.o-grid--large-full > .o-grid__cell {
      @include grid__cell--full;
    }
  }

  @include screen--xlarge-only {
    &.o-grid--xlarge-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
      @include grid__cell--fit;
    }

    &.o-grid--xlarge-full {
      @include grid--full;
    }

    &.o-grid--xlarge-full > .o-grid__cell {
      @include grid__cell--full;
    }
  }

  @include screen--super-only {
    &.o-grid--super-fit > .o-grid__cell:not([class*='o-grid__cell--width']) {
      @include grid__cell--fit;
    }

    &.o-grid--super-full {
      @include grid--full;
    }

    &.o-grid--super-full > .o-grid__cell {
      @include grid__cell--full;
    }
  }

  @include screen-and-up(xsmall) {
    &__cell {
      @include grid__responsive-cells(xsmall);
    }
  }

  @include screen-and-up(small) {
    &__cell {
      @include grid__responsive-cells(small);
    }
  }

  @include screen-and-up(medium) {
    &__cell {
      @include grid__responsive-cells(medium);
    }
  }

  @include screen-and-up(large) {
    &__cell {
      @include grid__responsive-cells(large);
    }
  }

  @include screen-and-up(xlarge) {
    &__cell {
      @include grid__responsive-cells(xlarge);
    }
  }

  @include screen-and-up(super) {
    &__cell {
      @include grid__responsive-cells(super);
    }
  }
}