@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--xsmall-and-up {
    &__cell {
      @include grid__responsive-cells(xsmall);
    }
  }

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

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

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

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

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