// (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;
}

.#{$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--basis-1-3 {
  flex-basis: 33.33%;
}

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

}

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

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

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

// 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;
  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 {
  min-height: 100vh;

  // 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;
}

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

// As a container of components

.#{$grommet-namespace}box--wrap {
  flex-wrap: wrap;
}

.#{$grommet-namespace}box--direction-row {
  flex-direction: row;
}

.#{$grommet-namespace}box--direction-row.#{$grommet-namespace}box--reverse {
  flex-direction: row-reverse;
}

@include media-query(palm) {
  .#{$grommet-namespace}box--direction-row.#{$grommet-namespace}box--responsive {
    flex-direction: column;

    &:not(.#{$grommet-namespace}box--justify-center) {
      align-items: stretch;
    }

    &.#{$grommet-namespace}box--reverse {
      flex-direction: column-reverse;
    }

    > .#{$grommet-namespace}box {
      flex-basis: auto;
    }
  }
}

.#{$grommet-namespace}box--direction-column {
  flex-direction: column;

  /// deprecate? remove?
  /// > .#{$grommet-namespace}header.#{$grommet-namespace}box--direction-row,
  /// > .#{$grommet-namespace}footer.#{$grommet-namespace}box--direction-row,
  /// > .#{$grommet-namespace}header__container--fixed {
  ///   flex: 0 0 auto;
  /// }
}

.#{$grommet-namespace}box--direction-column.#{$grommet-namespace}box--reverse {
  flex-direction: column-reverse;
}

.#{$grommet-namespace}box--justify-start {
  justify-content: flex-start;
}

.#{$grommet-namespace}box--justify-center {
  justify-content: center;
  /// flex-shrink: 0;
}

.#{$grommet-namespace}box--justify-between {
  justify-content: space-between;
}

.#{$grommet-namespace}box--justify-end {
  justify-content: flex-end;
}

.#{$grommet-namespace}box--align-start {
  align-items: flex-start;
}

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

.#{$grommet-namespace}box--align-end {
  align-items: flex-end;
}

.#{$grommet-namespace}box--align-baseline {
  align-items: baseline;
}

.#{$grommet-namespace}box--align-stretch {
  align-items: stretch;
}

.#{$grommet-namespace}box--align-content-start {
  align-content: flex-start;
}

.#{$grommet-namespace}box--align-content-end {
  align-content: flex-end;
}

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

.#{$grommet-namespace}box--align-content-between {
  align-content: space-between;
}

.#{$grommet-namespace}box--align-content-around {
  align-content: space-around;
}

.#{$grommet-namespace}box--align-content-stretch {
  align-content: stretch;
}

.#{$grommet-namespace}box--align-self-start {
  align-self: flex-start;
}

.#{$grommet-namespace}box--align-self-end {
  align-self: flex-end;
}

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

.#{$grommet-namespace}box--align-self-stretch {
  align-self: stretch;
}

// Container component padding (deprecate?)

.#{$grommet-namespace}box--direction-row.#{$grommet-namespace}box--pad-between-small {
  @include spaced-flex-basis(halve($inuit-base-spacing-unit));

  > *:not(:last-child) {
    margin-right: halve($inuit-base-spacing-unit);

    html.rtl & {
      margin-right: 0;
      margin-left: halve($inuit-base-spacing-unit);
    }
  }

  @include media-query(palm) {
    > *:not(:last-child) {
      margin-right: quarter($inuit-base-spacing-unit);

      html.rtl & {
        margin-right: 0;
        margin-left: quarter($inuit-base-spacing-unit);
      }
    }
  }
}

.#{$grommet-namespace}box--direction-row.#{$grommet-namespace}box--pad-between-medium {
  @include spaced-flex-basis($inuit-base-spacing-unit);

  > *:not(:last-child) {
    margin-right: $inuit-base-spacing-unit;

    html.rtl & {
      margin-right: 0;
      margin-left: $inuit-base-spacing-unit;
    }
  }

  @include media-query(palm) {
    > *:not(:last-child) {
      margin-right: halve($inuit-base-spacing-unit);

      html.rtl & {
        margin-right: 0;
        margin-left: halve($inuit-base-spacing-unit);
      }
    }
  }
}

.#{$grommet-namespace}box--direction-row.#{$grommet-namespace}box--pad-between-large {
  @include spaced-flex-basis(double($inuit-base-spacing-unit));

  > *:not(:last-child) {
    margin-right: double($inuit-base-spacing-unit);

    html.rtl & {
      margin-right: 0;
      margin-left: double($inuit-base-spacing-unit);
    }
  }
  @include media-query(palm) {
    > *:not(:last-child) {
      margin-right: $inuit-base-spacing-unit;

      html.rtl & {
        margin-right: 0;
        margin-left: $inuit-base-spacing-unit;
      }
    }
  }
}

@include media-query(palm) {
  .#{$grommet-namespace}box--direction-row.#{$grommet-namespace}box--responsive {
    // make sure between padding switches directions
    // on responsive
    &.#{$grommet-namespace}box--pad-between-small {
      > *:not(:last-child) {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: quarter($inuit-base-spacing-unit);
      }
    }

    &.#{$grommet-namespace}box--pad-between-medium {
      > *:not(:last-child) {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: halve($inuit-base-spacing-unit);
      }
    }

    &.#{$grommet-namespace}box--pad-between-large {
      > *:not(:last-child) {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: $inuit-base-spacing-unit;
      }
    }
  }
}

.#{$grommet-namespace}box--direction-column.#{$grommet-namespace}box--pad-between-small {
  > *:not(:last-child) {
    margin-bottom: halve($inuit-base-spacing-unit);
  }

  @include media-query(palm) {
    > *:not(:last-child) {
      margin-bottom: quarter($inuit-base-spacing-unit);
    }
  }
}

.#{$grommet-namespace}box--direction-column.#{$grommet-namespace}box--pad-between-medium {
  > *:not(:last-child) {
    margin-bottom: $inuit-base-spacing-unit;
  }

  @include media-query(palm) {
    > *:not(:last-child) {
      margin-bottom: halve($inuit-base-spacing-unit);
    }
  }
}

.#{$grommet-namespace}box--direction-column.#{$grommet-namespace}box--pad-between-large {
  > *:not(:last-child) {
    margin-bottom: double($inuit-base-spacing-unit);
  }

  @include media-query(palm) {
    > *:not(:last-child) {
      margin-bottom: $inuit-base-spacing-unit;
    }
  }
}