//
// Copyright IBM Corp. 2018, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use 'sass:map';
@use 'config' as *;
@use 'breakpoint' as *;

@mixin css-grid() {
  display: grid;
  grid-template-columns: repeat(
    var(--cds-grid-columns),
    minmax(0, var(--cds-grid-column-size))
  );
  margin-right: auto;
  margin-left: auto;
  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
  column-gap: var(--cds-grid-gutter);
}

@mixin subgrid() {
  display: grid;
  grid-template-columns: repeat(
    var(--cds-grid-columns),
    minmax(0, var(--cds-grid-column-size))
  );
  column-gap: var(--cds-grid-gutter);
}

:root {
  --cds-grid-columns: 4;
  --cds-grid-column-size: 1fr;
  --cds-grid-gutter: 2rem;
  --cds-grid-hang: 1rem;
  --cds-grid-margin: 0;

  @include breakpoint(md) {
    --cds-grid-columns: 8;
    --cds-grid-margin: 1rem;
  }

  @include breakpoint(lg) {
    --cds-grid-columns: 16;
  }

  @include breakpoint(max) {
    --cds-grid-margin: 1.5rem;
  }
}

.#{$prefix}--css-grid {
  @include css-grid();
}

.#{$prefix}--css-grid--12 {
  @include css-grid();
  @include breakpoint(lg) {
    --cds-grid-columns: 12;
  }
}

.#{$prefix}--subgrid {
  @include subgrid();
}

.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
  --cds-grid-gutter: 2rem;

  margin-right: 0;
  margin-left: 0;
  padding-right: calc(var(--cds-grid-gutter) / 2);
  padding-left: calc(var(--cds-grid-gutter) / 2);
}

// -----------------------------------------------------------------------------
// Narrow
// -----------------------------------------------------------------------------
.#{$prefix}--css-grid--narrow {
  --cds-grid-margin: 1rem;

  padding-right: var(--cds-grid-margin);
  padding-left: var(--cds-grid-margin);

  @include breakpoint(md) {
    padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
    padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
  }
}

.#{$prefix}--css-grid--narrow > [class*='#{$prefix}--col'] {
  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
}

// Narrow subgrid inside condensed
.#{$prefix}--css-grid--condensed
  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
  --cds-grid-gutter: 2rem;

  padding-right: calc(var(--cds-grid-gutter) / 2);
  padding-left: calc(var(--cds-grid-gutter) / 2);
}

// -----------------------------------------------------------------------------
// Condensed
// -----------------------------------------------------------------------------
.#{$prefix}--css-grid--condensed {
  --cds-grid-gutter: 2px;

  column-gap: var(--cds-grid-gutter);
  row-gap: var(--cds-grid-gutter);
}

// condensed subgrid inside wide
.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
  margin-right: calc(
    (var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
  );
  margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
}

// -----------------------------------------------------------------------------
// No Gutter
// -----------------------------------------------------------------------------
.#{$prefix}--css-grid--no-gutter {
  // This is set to 0px (versus 0) so that the calc expression for padding for
  // a grid container works as epxected. Without the unit, the calc() will
  // result in a value of 0.
  // stylelint-disable-next-line length-zero-no-unit
  --cds-grid-gutter: 0px;

  column-gap: var(--cds-grid-gutter);
}

// -----------------------------------------------------------------------------
// Column span
// -----------------------------------------------------------------------------
@mixin -column-span($i) {
  @if $i == 0 {
    display: none;
  } @else {
    --cds-grid-columns: #{$i};

    grid-column: span $i / span $i;
  }
}

@for $i from 0 through 16 {
  .#{$prefix}--col-span-#{$i} {
    @include -column-span($i);
  }
}

.#{$prefix}--col-span-auto {
  grid-column: auto;
}

.#{$prefix}--col-span-100 {
  grid-column: 1 / -1;
}

@each $name, $value in $grid-breakpoints {
  $columns: map.get($value, columns);

  @include breakpoint($name) {
    @for $i from 0 through $columns {
      .#{$prefix}--#{$name}\:col-span-#{$i} {
        @include -column-span($i);
      }
    }

    .#{$prefix}--#{$name}\:col-span-auto {
      grid-column: auto;
    }

    .#{$prefix}--#{$name}\:col-span-100 {
      grid-column: 1 / -1;
    }
  }
}

.#{$prefix}--col-span-25 {
  --cds-grid-columns: 1;

  grid-column: span 1;

  @include breakpoint(md) {
    --cds-grid-columns: 2;

    grid-column: span 2;
  }

  @include breakpoint(lg) {
    --cds-grid-columns: 4;

    grid-column: span 4;
  }
}

.#{$prefix}--col-span-50 {
  --cds-grid-columns: 2;

  grid-column: span 2;

  @include breakpoint(md) {
    --cds-grid-columns: 4;

    grid-column: span 4;
  }

  @include breakpoint(lg) {
    --cds-grid-columns: 8;

    grid-column: span 8;
  }
}

.#{$prefix}--col-span-75 {
  --cds-grid-columns: 3;

  grid-column: span 3;

  @include breakpoint(md) {
    --cds-grid-columns: 6;

    grid-column: span 6;
  }

  @include breakpoint(lg) {
    --cds-grid-columns: 12;

    grid-column: span 12;
  }
}

// -----------------------------------------------------------------------------
// Column offset
// -----------------------------------------------------------------------------
@for $i from 1 through 16 {
  .#{$prefix}--col-start-#{$i} {
    grid-column-start: $i;
  }

  .#{$prefix}--col-end-#{$i} {
    grid-column-end: $i;
  }
}

.#{$prefix}--col-start-auto {
  grid-column-start: auto;
}

.#{$prefix}--col-end-auto {
  grid-column-start: end;
}

@each $name, $value in $grid-breakpoints {
  $columns: map.get($value, columns);

  @include breakpoint($name) {
    @for $i from 1 through $columns {
      .#{$prefix}--#{$name}\:col-start-#{$i} {
        grid-column-start: $i;
      }

      .#{$prefix}--#{$name}\:col-end-#{$i} {
        grid-column-end: $i;
      }
    }

    .#{$prefix}--#{$name}\:col-start-auto {
      grid-column-start: auto;
    }

    .#{$prefix}--#{$name}\:col-end-auto {
      grid-column-start: end;
    }
  }
}

// -----------------------------------------------------------------------------
// Hang
// -----------------------------------------------------------------------------
.#{$prefix}--hang {
  padding-left: var(--cds-grid-hang);
}

// -----------------------------------------------------------------------------
// Column gutter
// -----------------------------------------------------------------------------
.#{$prefix}--gutter {
  padding-right: var(--cds-grid-hang);
  padding-left: var(--cds-grid-hang);
}

.#{$prefix}--gutter-start {
  padding-left: var(--cds-grid-hang);
}

[dir='rtl'] .#{$prefix}--gutter-start {
  padding-right: var(--cds-grid-hang);
}

.#{$prefix}--gutter-end {
  padding-right: var(--cds-grid-hang);
}

[dir='rtl'] .#{$prefix}--gutter-end {
  padding-left: var(--cds-grid-hang);
}

// -----------------------------------------------------------------------------
// Utilities
// -----------------------------------------------------------------------------

/// Justify items
.#{$prefix}--justify-items-start {
  justify-items: start;
}

.#{$prefix}--justify-items-end {
  justify-items: end;
}

.#{$prefix}--justify-items-center {
  justify-items: center;
}

/// Align items
.#{$prefix}--align-items-start {
  align-items: start;
}

.#{$prefix}--align-items-end {
  align-items: end;
}

.#{$prefix}--align-items-center {
  align-items: center;
}