<commit_before>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

@mixin spaced-flex-basis ($pad-space) {
  &.#{$grommet-namespace}box--pad-between-thirds {
    > .#{$grommet-namespace}box--basis-1-3 {
      // max-width: calc(33.33% - #{$pad-space * (2/3)});
      flex-basis: calc(33.33% - #{$pad-space * (2/3)});

      @include media-query (palm) {
        flex-basis: auto;
        max-width: none;
        // prevent width overflow in proportional boxes in mobile
        width: 100%;
      }
    }
  }

  > .#{$grommet-namespace}box--basis-1-2 {
    // max-width: calc(50% - #{$pad-space * 0.5});
    flex-basis: calc(50% - #{$pad-space * 0.5});
  }

  > .#{$grommet-namespace}box--basis-1-3 {
    // max-width: calc(33.33% - #{$pad-space * 0.5});
    flex-basis: calc(33.33% - #{$pad-space * 0.5});
  }

  > .#{$grommet-namespace}box--basis-2-3 {
    // max-width: calc(66.66% - #{$pad-space * 0.5});
    flex-basis: calc(66.66% - #{$pad-space * 0.5});
  }

  > .#{$grommet-namespace}box--basis-1-4 {
    // max-width: calc(25% - #{$pad-space * 0.75});
    flex-basis: calc(25% - #{$pad-space * 0.75});

    @include media-query(portable) {
      &:nth-of-type(2) {
        margin-right: 0px;
      }

      // max-width: calc(50% - #{$pad-space * 0.5});
      flex-basis: calc(50% - #{$pad-space * 0.5});
    }
  }

  > .#{$grommet-namespace}box--basis-3-4 {
    // max-width: calc(75% - #{$pad-space * 0.75});
    flex-basis: calc(75% - #{$pad-space * 0.75});
  }

  @include media-query (palm) {
    > .#{$grommet-namespace}box--basis-1-2,
    > .#{$grommet-namespace}box--basis-1-3,
    > .#{$grommet-namespace}box--basis-2-3,
    > .#{$grommet-namespace}box--basis-1-4,
    > .#{$grommet-namespace}box--basis-3-4 {
      flex-basis: auto;
      max-width: none;
      // prevent width overflow in proportional boxes in mobile
      width: 100%;
    }
  }
}

// // temporary flex grow capability
// .flex { // remove in 1.0?
//   flex-grow: 1;
//   // need to fix flexbox issue with min-width: auto for some tags
//   // https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
//   min-width: 0;
// }
//
// .no-flex { // remove in 1.0?
//   flex: 0 0 auto;
// }

.#{$grommet-namespace}box {
  display: flex;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  @include pad();
  @include margin();
}

// Decorations

.#{$grommet-namespace}box__texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.#{$grommet-namespace}box--separator-top,
.#{$grommet-namespace}box--separator-horizontal,
.#{$grommet-namespace}box--separator-all {
  border-top: 1px solid $border-color;
}

.#{$grommet-namespace}box--separator-bottom,
.#{$grommet-namespace}box--separator-horizontal,
.#{$grommet-namespace}box--separator-all {
  border-bottom: 1px solid $border-color;
}

.#{$grommet-namespace}box--separator-left,
.#{$grommet-namespace}box--separator-vertical,
.#{$grommet-namespace}box--separator-all {
  border-left: 1px solid $border-color;

  @include media-query (palm) {
    .#{$grommet-namespace}box--responsive.#{$grommet-namespace}box--direction-row & {
      border-left: none;
      border-top: 1px solid $border-color;
    }
  }
}

.#{$grommet-namespace}box--separator-right,
.#{$grommet-namespace}box--separator-vertical,
.#{$grommet-namespace}box--separator-all {
  border-right: 1px solid $border-color;

  @include media-query (palm) {
    .#{$grommet-namespace}box--responsive.#{$grommet-namespace}box--direction-row & {
      border-right: none;
      border-bottom: 1px solid $border-color;
    }
  }
}

.#{$grommet-namespace}box[class*="#{$grommet-namespace}box--separator"] {
  #{$dark-background-context} {
    border-color: $colored-border-color;
  }

  #{$light-background-context} {
    border-color: $border-color;
  }
}

// Interaction

.#{$grommet-namespace}box--clickable {
  cursor: pointer;
  outline: none;
}

.#{$grommet-namespace}box--focus {
  border-color: $focus-border-color;
  box-shadow: 0 0 1px 1px $focus-border-color;
}

// Outer context

.#{$grommet-namespace}box__container {
  padding-left: $inuit-base-spacing-unit;
  padding-right: $inuit-base-spacing-unit;
}

.#{$grommet-namespace}app--centered .#{$grommet-namespace}box__container >
  .#{$grommet-namespace}box {
  width: 100%;
  max-width: $center-column-width;
  margin-left: auto;
  margin-right: auto;

  @include media-query(palm) {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.#{$grommet-namespace}box__container--full {
  max-width: 100%;
  width: 100vw;
}

.#{$grommet-namespace}box__container--full-horizontal {
  max-width: 100%;
  width: 100vw;
}

// Sizing

// flex-grow, flex-shrink

.#{$grommet-namespace}box--flex {
  flex: 1 1;
  // need to fix flexbox issue with min-width: auto for some tags
  min-width: 0;
  overflow: auto;
}

.#{$grommet-namespace}box--flex-off {
  flex: 0 0 auto;
}

.#{$grommet-namespace}box--flex-grow {
  flex: 1 0;

  &:not([class^=".#{$grommet-namespace}box--basis"]) {
    flex-basis: auto;
  }

  // need to fix flexbox issue with min-width: auto for some tags
  min-width: 0;
}

// not necessary since this is the default
.#{$grommet-namespace}box--flex-shrink {
  flex: 0 1;
}

// flex-basis

.#{$grommet-namespace}box--basis-xsmall {
  flex-basis: $size-xsmall;
}

.#{$grommet-namespace}box--basis-small {
  flex-basis: $size-small;
}

.#{$grommet-namespace}box--basis-medium {
  flex-basis: $size-medium;
}

.#{$grommet-namespace}box--basis-large {
  flex-basis: $size-large;
}

.#{$grommet-namespace}box--basis-xlarge {
  flex-basis: $size-xlarge;
}

.#{$grommet-namespace}box--basis-xxlarge {
  flex-basis: $size-xxlarge;
}

.#{$grommet-namespace}box--basis-full {
  flex-basis: 100%;
}

.#{$grommet-namespace}box--basis-1-2 {
  flex-basis: 50%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(50% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(50% - 1px);
  }
}

.#{$grommet-namespace}box--basis-1-3 {
  // max-width: 33.33%;
  flex-basis: 33.33%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(33.33% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(33.33% - 1px);
  }
}

.#{$grommet-namespace}box--basis-2-3 {
  flex-basis: 66.66%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(66.66% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(66.66% - 1px);
  }
}

.#{$grommet-namespace}box--basis-1-4 {
  flex-basis: 25%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(25% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(25% - 1px);
  }

  @include media-query(portable) { // needed?
    flex-basis: 50%;

    &.#{$grommet-namespace}box--separator-all,
    &.#{$grommet-namespace}box--separator-vertical {
      // account for border to avoid ie11 problems
      flex-basis: calc(50% - 2px);
    }

    &.#{$grommet-namespace}box--separator-right,
    &.#{$grommet-namespace}box--separator-left {
      // account for border to avoid ie11 problems
      flex-basis: calc(50% - 1px);
    }
  }
}

.#{$grommet-namespace}box--basis-3-4 {
  flex-basis: 75%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(75% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(75% - 1px);
  }
}

// width

.#{$grommet-namespace}box--width-xsmall {
  width: $size-xsmall;
}

.#{$grommet-namespace}box--width-small {
  width: $size-small;
}

.#{$grommet-namespace}box--width-medium {
  width: $size-medium;
}

.#{$grommet-namespace}box--width-large {
  width: $size-large;
}

.#{$grommet-namespace}box--width-xlarge {
  width: $size-xlarge;
}

.#{$grommet-namespace}box--width-xxlarge {
  width: $size-xxlarge;
}

// height

.#{$grommet-namespace}box--height-xsmall {
  height: $size-xsmall;
}

.#{$grommet-namespace}box--height-small {
  height: $size-small;
}

.#{$grommet-namespace}box--height-medium {
  height: $size-medium;
}

.#{$grommet-namespace}box--height-large {
  height: $size-large;
}

.#{$grommet-namespace}box--height-xlarge {
  height: $size-xlarge;
}

.#{$grommet-namespace}box--height-xxlarge {
  height: $size-xxlarge;
}

// min-width

.#{$grommet-namespace}box--width-min-xsmall {
  min-width: $size-xsmall;
}

.#{$grommet-namespace}box--width-min-small {
  min-width: $size-small;
}

.#{$grommet-namespace}box--width-min-medium {
  min-width: $size-medium;
}

.#{$grommet-namespace}box--width-min-large {
  min-width: $size-large;
}

.#{$grommet-namespace}box--width-min-xlarge {
  min-width: $size-xlarge;
}

.#{$grommet-namespace}box--width-min-xxlarge {
  min-width: $size-xxlarge;
}

// max-width

.#{$grommet-namespace}box--width-max-xsmall {
  max-width: $size-xsmall;
}

.#{$grommet-namespace}box--width-max-small {
  max-width: $size-small;
}

.#{$grommet-namespace}box--width-max-medium {
  max-width: $size-medium;
}

.#{$grommet-namespace}box--width-max-large {
  max-width: $size-large;
}

.#{$grommet-namespace}box--width-max-xlarge {
  max-width: $size-xlarge;
}

.#{$grommet-namespace}box--width-max-xxlarge {
  max-width: $size-xxlarge;
}

// max-height

.#{$grommet-namespace}box--height-max-xsmall {
  max-height: $size-xsmall;
}

.#{$grommet-namespace}box--height-max-small {
  max-height: $size-small;
}

.#{$grommet-namespace}box--height-max-medium {
  max-height: $size-medium;
}

.#{$grommet-namespace}box--height-max-large {
  max-height: $size-large;
}

.#{$grommet-namespace}box--height-max-xlarge {
  max-height: $size-xlarge;
}

.#{$grommet-namespace}box--height-max-xxlarge {
  max-height: $size-xxlarge;
}

// min-height

.#{$grommet-namespace}box--height-min-xsmall {
  min-height: $size-xsmall;
}

.#{$grommet-namespace}box--height-min-small {
  min-height: $size-small;
}

.#{$grommet-namespace}box--height-min-medium {
  min-height: $size-medium;
}

.#{$grommet-namespace}box--height-min-large {
  min-height: $size-large;
}

.#{$grommet-namespace}box--height-min-xlarge {
  min-height: $size-xlarge;
}

.#{$grommet-namespace}box--height-min-xxlarge {
  min-height: $size-xxlarge;
}

// full

.#{$grommet-namespace}box--full {
  position: relative;
  max-width: 100%;
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  overflow: auto;

  &.#{$grommet-namespace}box--full-responsive {
    @include media-query(palm) {
      min-height: 100vh;
      height: 100%;
    }
  }

  // // IE11 specific fix for aligning content vertically centered
  // // height gets over written by the > min-height
  // @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  //   height: 50vh;
  // }
}

.#{$grommet-namespace}box--full-horizontal {
  max-width: 100%;
  width: 100vw;
}

.#{$grommet-namespace}box--full-vertical {
  height: 100vh;
  max-height: 100%;
  overflow: auto;

  &.#{$grommet-namespace}box--full-responsive {
    @include media-query(palm) {
      min-height: 100vh;
      height: 100%;
    }
  }

  // // IE11 specific fix for aligning content vertically centered
  // // height gets over written by the > min-height
  // @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  //   min-height: 100vh;
  //   height: 50vh;
  // }
}

.#{$grommet-namespace}box--size {
  max-width: 100%;
  max-height: 100%;

  // deprecate? remove?
  .#{grommet-namespace}paragraph {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
}

// deprecated use of the 'size' property

.#{$grommet-namespace}box--size-xsmall {
  width: $size-xsmall;
}

.#{$grommet-namespace}box--size-small {
  width: $size-small;
}

.#{$grommet-namespace}box--size-medium {
  width: $size-medium;
}

.#{$grommet-namespace}box--size-large {
  width: $size-large;
}

// not necessary since this is the default
.#{$grommet-namespace}box--size-auto {
  width: auto;
}

// As a container of text

.#{$grommet-namespace}box--text-align-left {
  text-align: left;
}

.#{$grommet-namespace}box--text-align-center {
  text-align: center;
}
<commit_msg>Added size xlarge and xxlarge to Box sass<commit_after>// (C) Copyright 2014-2016 Hewlett Packard Enterprise Development LP

@mixin spaced-flex-basis ($pad-space) {
  &.#{$grommet-namespace}box--pad-between-thirds {
    > .#{$grommet-namespace}box--basis-1-3 {
      // max-width: calc(33.33% - #{$pad-space * (2/3)});
      flex-basis: calc(33.33% - #{$pad-space * (2/3)});

      @include media-query (palm) {
        flex-basis: auto;
        max-width: none;
        // prevent width overflow in proportional boxes in mobile
        width: 100%;
      }
    }
  }

  > .#{$grommet-namespace}box--basis-1-2 {
    // max-width: calc(50% - #{$pad-space * 0.5});
    flex-basis: calc(50% - #{$pad-space * 0.5});
  }

  > .#{$grommet-namespace}box--basis-1-3 {
    // max-width: calc(33.33% - #{$pad-space * 0.5});
    flex-basis: calc(33.33% - #{$pad-space * 0.5});
  }

  > .#{$grommet-namespace}box--basis-2-3 {
    // max-width: calc(66.66% - #{$pad-space * 0.5});
    flex-basis: calc(66.66% - #{$pad-space * 0.5});
  }

  > .#{$grommet-namespace}box--basis-1-4 {
    // max-width: calc(25% - #{$pad-space * 0.75});
    flex-basis: calc(25% - #{$pad-space * 0.75});

    @include media-query(portable) {
      &:nth-of-type(2) {
        margin-right: 0px;
      }

      // max-width: calc(50% - #{$pad-space * 0.5});
      flex-basis: calc(50% - #{$pad-space * 0.5});
    }
  }

  > .#{$grommet-namespace}box--basis-3-4 {
    // max-width: calc(75% - #{$pad-space * 0.75});
    flex-basis: calc(75% - #{$pad-space * 0.75});
  }

  @include media-query (palm) {
    > .#{$grommet-namespace}box--basis-1-2,
    > .#{$grommet-namespace}box--basis-1-3,
    > .#{$grommet-namespace}box--basis-2-3,
    > .#{$grommet-namespace}box--basis-1-4,
    > .#{$grommet-namespace}box--basis-3-4 {
      flex-basis: auto;
      max-width: none;
      // prevent width overflow in proportional boxes in mobile
      width: 100%;
    }
  }
}

// // temporary flex grow capability
// .flex { // remove in 1.0?
//   flex-grow: 1;
//   // need to fix flexbox issue with min-width: auto for some tags
//   // https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
//   min-width: 0;
// }
//
// .no-flex { // remove in 1.0?
//   flex: 0 0 auto;
// }

.#{$grommet-namespace}box {
  display: flex;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  @include pad();
  @include margin();
}

// Decorations

.#{$grommet-namespace}box__texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.#{$grommet-namespace}box--separator-top,
.#{$grommet-namespace}box--separator-horizontal,
.#{$grommet-namespace}box--separator-all {
  border-top: 1px solid $border-color;
}

.#{$grommet-namespace}box--separator-bottom,
.#{$grommet-namespace}box--separator-horizontal,
.#{$grommet-namespace}box--separator-all {
  border-bottom: 1px solid $border-color;
}

.#{$grommet-namespace}box--separator-left,
.#{$grommet-namespace}box--separator-vertical,
.#{$grommet-namespace}box--separator-all {
  border-left: 1px solid $border-color;

  @include media-query (palm) {
    .#{$grommet-namespace}box--responsive.#{$grommet-namespace}box--direction-row & {
      border-left: none;
      border-top: 1px solid $border-color;
    }
  }
}

.#{$grommet-namespace}box--separator-right,
.#{$grommet-namespace}box--separator-vertical,
.#{$grommet-namespace}box--separator-all {
  border-right: 1px solid $border-color;

  @include media-query (palm) {
    .#{$grommet-namespace}box--responsive.#{$grommet-namespace}box--direction-row & {
      border-right: none;
      border-bottom: 1px solid $border-color;
    }
  }
}

.#{$grommet-namespace}box[class*="#{$grommet-namespace}box--separator"] {
  #{$dark-background-context} {
    border-color: $colored-border-color;
  }

  #{$light-background-context} {
    border-color: $border-color;
  }
}

// Interaction

.#{$grommet-namespace}box--clickable {
  cursor: pointer;
  outline: none;
}

.#{$grommet-namespace}box--focus {
  border-color: $focus-border-color;
  box-shadow: 0 0 1px 1px $focus-border-color;
}

// Outer context

.#{$grommet-namespace}box__container {
  padding-left: $inuit-base-spacing-unit;
  padding-right: $inuit-base-spacing-unit;
}

.#{$grommet-namespace}app--centered .#{$grommet-namespace}box__container >
  .#{$grommet-namespace}box {
  width: 100%;
  max-width: $center-column-width;
  margin-left: auto;
  margin-right: auto;

  @include media-query(palm) {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.#{$grommet-namespace}box__container--full {
  max-width: 100%;
  width: 100vw;
}

.#{$grommet-namespace}box__container--full-horizontal {
  max-width: 100%;
  width: 100vw;
}

// Sizing

// flex-grow, flex-shrink

.#{$grommet-namespace}box--flex {
  flex: 1 1;
  // need to fix flexbox issue with min-width: auto for some tags
  min-width: 0;
  overflow: auto;
}

.#{$grommet-namespace}box--flex-off {
  flex: 0 0 auto;
}

.#{$grommet-namespace}box--flex-grow {
  flex: 1 0;

  &:not([class^=".#{$grommet-namespace}box--basis"]) {
    flex-basis: auto;
  }

  // need to fix flexbox issue with min-width: auto for some tags
  min-width: 0;
}

// not necessary since this is the default
.#{$grommet-namespace}box--flex-shrink {
  flex: 0 1;
}

// flex-basis

.#{$grommet-namespace}box--basis-xsmall {
  flex-basis: $size-xsmall;
}

.#{$grommet-namespace}box--basis-small {
  flex-basis: $size-small;
}

.#{$grommet-namespace}box--basis-medium {
  flex-basis: $size-medium;
}

.#{$grommet-namespace}box--basis-large {
  flex-basis: $size-large;
}

.#{$grommet-namespace}box--basis-xlarge {
  flex-basis: $size-xlarge;
}

.#{$grommet-namespace}box--basis-xxlarge {
  flex-basis: $size-xxlarge;
}

.#{$grommet-namespace}box--basis-full {
  flex-basis: 100%;
}

.#{$grommet-namespace}box--basis-1-2 {
  flex-basis: 50%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(50% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(50% - 1px);
  }
}

.#{$grommet-namespace}box--basis-1-3 {
  // max-width: 33.33%;
  flex-basis: 33.33%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(33.33% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(33.33% - 1px);
  }
}

.#{$grommet-namespace}box--basis-2-3 {
  flex-basis: 66.66%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(66.66% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(66.66% - 1px);
  }
}

.#{$grommet-namespace}box--basis-1-4 {
  flex-basis: 25%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(25% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(25% - 1px);
  }

  @include media-query(portable) { // needed?
    flex-basis: 50%;

    &.#{$grommet-namespace}box--separator-all,
    &.#{$grommet-namespace}box--separator-vertical {
      // account for border to avoid ie11 problems
      flex-basis: calc(50% - 2px);
    }

    &.#{$grommet-namespace}box--separator-right,
    &.#{$grommet-namespace}box--separator-left {
      // account for border to avoid ie11 problems
      flex-basis: calc(50% - 1px);
    }
  }
}

.#{$grommet-namespace}box--basis-3-4 {
  flex-basis: 75%;

  &.#{$grommet-namespace}box--separator-all,
  &.#{$grommet-namespace}box--separator-vertical {
    // account for border to avoid ie11 problems
    flex-basis: calc(75% - 2px);
  }

  &.#{$grommet-namespace}box--separator-right,
  &.#{$grommet-namespace}box--separator-left {
    // account for border to avoid ie11 problems
    flex-basis: calc(75% - 1px);
  }
}

// width

.#{$grommet-namespace}box--width-xsmall {
  width: $size-xsmall;
}

.#{$grommet-namespace}box--width-small {
  width: $size-small;
}

.#{$grommet-namespace}box--width-medium {
  width: $size-medium;
}

.#{$grommet-namespace}box--width-large {
  width: $size-large;
}

.#{$grommet-namespace}box--width-xlarge {
  width: $size-xlarge;
}

.#{$grommet-namespace}box--width-xxlarge {
  width: $size-xxlarge;
}

// height

.#{$grommet-namespace}box--height-xsmall {
  height: $size-xsmall;
}

.#{$grommet-namespace}box--height-small {
  height: $size-small;
}

.#{$grommet-namespace}box--height-medium {
  height: $size-medium;
}

.#{$grommet-namespace}box--height-large {
  height: $size-large;
}

.#{$grommet-namespace}box--height-xlarge {
  height: $size-xlarge;
}

.#{$grommet-namespace}box--height-xxlarge {
  height: $size-xxlarge;
}

// min-width

.#{$grommet-namespace}box--width-min-xsmall {
  min-width: $size-xsmall;
}

.#{$grommet-namespace}box--width-min-small {
  min-width: $size-small;
}

.#{$grommet-namespace}box--width-min-medium {
  min-width: $size-medium;
}

.#{$grommet-namespace}box--width-min-large {
  min-width: $size-large;
}

.#{$grommet-namespace}box--width-min-xlarge {
  min-width: $size-xlarge;
}

.#{$grommet-namespace}box--width-min-xxlarge {
  min-width: $size-xxlarge;
}

// max-width

.#{$grommet-namespace}box--width-max-xsmall {
  max-width: $size-xsmall;
}

.#{$grommet-namespace}box--width-max-small {
  max-width: $size-small;
}

.#{$grommet-namespace}box--width-max-medium {
  max-width: $size-medium;
}

.#{$grommet-namespace}box--width-max-large {
  max-width: $size-large;
}

.#{$grommet-namespace}box--width-max-xlarge {
  max-width: $size-xlarge;
}

.#{$grommet-namespace}box--width-max-xxlarge {
  max-width: $size-xxlarge;
}

// max-height

.#{$grommet-namespace}box--height-max-xsmall {
  max-height: $size-xsmall;
}

.#{$grommet-namespace}box--height-max-small {
  max-height: $size-small;
}

.#{$grommet-namespace}box--height-max-medium {
  max-height: $size-medium;
}

.#{$grommet-namespace}box--height-max-large {
  max-height: $size-large;
}

.#{$grommet-namespace}box--height-max-xlarge {
  max-height: $size-xlarge;
}

.#{$grommet-namespace}box--height-max-xxlarge {
  max-height: $size-xxlarge;
}

// min-height

.#{$grommet-namespace}box--height-min-xsmall {
  min-height: $size-xsmall;
}

.#{$grommet-namespace}box--height-min-small {
  min-height: $size-small;
}

.#{$grommet-namespace}box--height-min-medium {
  min-height: $size-medium;
}

.#{$grommet-namespace}box--height-min-large {
  min-height: $size-large;
}

.#{$grommet-namespace}box--height-min-xlarge {
  min-height: $size-xlarge;
}

.#{$grommet-namespace}box--height-min-xxlarge {
  min-height: $size-xxlarge;
}

// full

.#{$grommet-namespace}box--full {
  position: relative;
  max-width: 100%;
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  overflow: auto;

  &.#{$grommet-namespace}box--full-responsive {
    @include media-query(palm) {
      min-height: 100vh;
      height: 100%;
    }
  }

  // // IE11 specific fix for aligning content vertically centered
  // // height gets over written by the > min-height
  // @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  //   height: 50vh;
  // }
}

.#{$grommet-namespace}box--full-horizontal {
  max-width: 100%;
  width: 100vw;
}

.#{$grommet-namespace}box--full-vertical {
  height: 100vh;
  max-height: 100%;
  overflow: auto;

  &.#{$grommet-namespace}box--full-responsive {
    @include media-query(palm) {
      min-height: 100vh;
      height: 100%;
    }
  }

  // // IE11 specific fix for aligning content vertically centered
  // // height gets over written by the > min-height
  // @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  //   min-height: 100vh;
  //   height: 50vh;
  // }
}

.#{$grommet-namespace}box--size {
  max-width: 100%;
  max-height: 100%;

  // deprecate? remove?
  .#{grommet-namespace}paragraph {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
}

// deprecated use of the 'size' property

.#{$grommet-namespace}box--size-xsmall {
  width: $size-xsmall;
}

.#{$grommet-namespace}box--size-small {
  width: $size-small;
}

.#{$grommet-namespace}box--size-medium {
  width: $size-medium;
}

.#{$grommet-namespace}box--size-large {
  width: $size-large;
}

.#{$grommet-namespace}box--size-xlarge {
  width: $size-xlarge;
}

.#{$grommet-namespace}box--size-xxlarge {
  width: $size-xxlarge;
}

// not necessary since this is the default
.#{$grommet-namespace}box--size-auto {
  width: auto;
}

// As a container of text

.#{$grommet-namespace}box--text-align-left {
  text-align: left;
}

.#{$grommet-namespace}box--text-align-center {
  text-align: center;
}

{'fraction_non_alphanumeric': 0.19974148418491483, 'fraction_numerical': 0.02524330900243309, 'mean_word_length': 3.0431909007070397, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 31, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '398093', 'n_tokens_mistral': 11008, 'n_tokens_neox': 9968, 'n_words': 1593}