@use "@uqds/core/src/scss/global" as core;
@use "global" as *;

/**
 * Grid container (incl. full width modifier class)
 */
@include grid-row(12, "xl") {
  &:not(.uq-grid--full-width) {
    @include layout-containment; // contain the first grid wrapper by default
  }

  &--full-width {
    @include layout-full-width;
  }

  .uq-grid {
    @include layout-nested;
  }
}

/**
 * Grid columns (spans)
 */
@include grid-col-span-classes(8, "md");
@include grid-col-span-classes(6);

@media #{core.$screen-md-up} {
  @include grid-col-span-classes(12, "xl");
  @include grid-col-span-classes(8, "md");
}

@media #{core.$screen-xl-up} {
  @include grid-col-span-classes(12, "xl");
}

/**
 * Flexible Grid (modifier class)
 */
.uq-grid--flexible {
  // Flex fallback
  > .uq-grid__col {
    flex: 1 0 15.625rem;
    max-width: 100%;
    width: auto;
  }

  // CSS Grid implementation
  @supports (display: grid) {
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
  }
}

/**
 * Golden layout (modifier class)
 */
.uq-grid--golden {
  > .uq-grid__col {
    &:nth-child(odd) {
      @extend .uq-grid__col--6, .uq-grid__col--md-5, .uq-grid__col--xl-7;
    }

    &:nth-child(even) {
      @extend .uq-grid__col--6, .uq-grid__col--md-2, .uq-grid__col--xl-4;
      @media #{core.$screen-md-up} {
        @include grid-col-offset(1, 8);
        @supports (display: grid) {
          margin-left: 0;
          grid-column-start: calc-true-colspan(6, 8, $shadow-column-count);
        }
      }
      @media #{core.$screen-xl-up} {
        @include grid-col-offset(1, 12);
        @supports (display: grid) {
          margin-left: 0;
          grid-column-start: calc-true-colspan(9, 12, $shadow-column-count);
        }
      }
    }
  }
}

/**
 * Set column grids (modifier classes)
 */
.uq-grid--halves {
  > .uq-grid__col {
    @extend .uq-grid__col--6, .uq-grid__col--md-4;
  }
}

.uq-grid--thirds {
  > .uq-grid__col {
    @extend .uq-grid__col--6, .uq-grid__col--md-4, .uq-grid__col--xl-4;
  }
}

.uq-grid--quarters {
  > .uq-grid__col {
    @extend .uq-grid__col--6, .uq-grid__col--md-4, .uq-grid__col--xl-3;
  }
}

/**
 * Scroll small grid (WIP)
 * A grid the scrolls horizontally on mobile. Useful for holding cards.
 */
@media #{core.$screen-lg-down} {
  .uq-grid--scroll-small {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;

    .uq-grid__col {
      flex: 1 0 18.75rem;
      margin-right: core.$space-l;
    }
  }
}

/**
 * Layout container
 */
.uq-layout-container {
  @include layout-containment;
  @include grid-col-padding;

  .uq-grid {
    @include layout-nested;
  }
}