/* ==========================================================================
   #GRID
   ========================================================================== */

@import '@bolt/core-v3.x';

$bolt-grid-border-width: 2px;
$bolt-grid-border-color: var(--m-bolt-border);

/**
 * 1. Workaround to Safari layout getting thrown off when using a negative letter-spacing to remove inline-block whitespace
 *    @TODO: remove when v1 grid with CSS Grid support rolls out
 * 2. Reset local font-size inheritance to prevent components w/o default font sizes from breaking
 */
.o-bolt-grid {
  flex: 1 1 auto; //Automatically auto fill any available space, in case a grid is nested inside of a flexbox-friendly parent container.
  margin: 0;
  padding: 0;
  font-size: 0; /* [1] */
  list-style: none;
}

.o-bolt-grid__cell {
  display: inline-block;
  position: relative;
  font-size: 1rem; /* [2] */
  vertical-align: top;
}

/**
 * Cell order goes from right to left
 */
.o-bolt-grid--rev {
  direction: rtl;

  > .o-bolt-grid__cell {
    direction: ltr;
  }
}

/**
 * Gutterless grids have all the properties of regular grids, minus any spacing
 */
.o-bolt-grid--full {
  margin-left: 0;

  > .o-bolt-grid__cell {
    padding-left: 0;
  }
}

/**
 * Horizontally center align grid cells
 */
.o-bolt-grid--center {
  justify-content: center;
  text-align: center;

  > .o-bolt-grid__cell {
    text-align: left;
  }
}

/**
 * Horizontally right align grid cells
 */
.o-bolt-grid--right {
  justify-content: flex-end;
  text-align: right;

  > .o-bolt-grid__cell {
    text-align: left;
  }
}

/**
 * Vertically align grid cells
 */
.o-bolt-grid--middle {
  &.o-bolt-grid--flex {
    align-items: center;
  }

  > .o-bolt-grid__cell {
    vertical-align: middle;
  }
}

.o-bolt-grid--bottom {
  &.o-bolt-grid--flex {
    align-items: flex-end;
  }

  > .o-bolt-grid__cell {
    vertical-align: bottom;
  }
}

.o-bolt-grid__cell--middle {
  align-self: center;
  vertical-align: middle;
}

.o-bolt-grid__cell--top {
  align-self: flex-start;
  vertical-align: top;
}

.o-bolt-grid__cell--bottom {
  align-self: flex-end;
  vertical-align: bottom;
}

/**
 * Size options
 */
$bolt-object-grid-sizes: xsmall, small, large, xlarge;

.o-bolt-grid {
  margin-left: calc(var(--bolt-spacing-x-medium) * -1);

  .o-bolt-grid__cell {
    padding-left: var(--bolt-spacing-x-medium);
  }

  @each $size in $bolt-object-grid-sizes {
    &.o-bolt-grid--#{$size} {
      margin-left: calc(var(--bolt-spacing-x-#{$size}) * -1);

      > .o-bolt-grid__cell {
        padding-left: var(--bolt-spacing-x-#{$size});
      }
    }
  }
}

.o-bolt-grid--matrix {
  margin-bottom: calc(var(--bolt-spacing-y-medium) * -1);

  > .o-bolt-grid__cell {
    padding-bottom: var(--bolt-spacing-y-medium);
  }

  @each $size in $bolt-object-grid-sizes {
    // @todo: [Mai] ommitting xlarge to prevent breaking changes. Grid will be reworked into the Layouts folder. Only introduce breaking changes then.
    @if ($size != 'xlarge') {
      &.o-bolt-grid--#{$size} {
        margin-bottom: calc(var(--bolt-spacing-y-#{$size}) * -1);

        > .o-bolt-grid__cell {
          padding-bottom: var(--bolt-spacing-y-#{$size});
        }
      }
    }
  }
}

/**
 * Flex grid
 */
.o-bolt-grid--flex {
  display: flex;
  flex-flow: row wrap;
}

/**
 * Bordered grid
 */
.o-bolt-grid-wrapper {
  overflow: hidden; // Outer grid wrapper used with the "bordered" variation in order to hide overflowing cell padding/borders.
}

.o-bolt-grid--matrix.o-bolt-grid--border {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bolt-spacing-y-small) * -1);
  margin-right: calc(var(--bolt-spacing-x-small) * -1);
  margin-bottom: calc(var(--bolt-spacing-y-small) * -1);
  margin-left: calc(var(--bolt-spacing-x-small) * -1);
  padding: 0;
  list-style: none;

  > .o-bolt-grid__cell {
    margin-top: $bolt-grid-border-width * -1;
    margin-right: $bolt-grid-border-width * -1;
    padding: var(--bolt-spacing-y-small) var(--bolt-spacing-x-small);
    border-bottom-color: $bolt-grid-border-color;
    border-bottom-style: solid;
    border-bottom-width: $bolt-grid-border-width;
    border-left-color: $bolt-grid-border-color;
    border-left-style: solid;
    border-left-width: $bolt-grid-border-width;
  }
}