// embl-grid

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
* Component: #{map-get($componentInfo, 'name')}
* Version: #{map-get($componentInfo, 'version')}
* Location: #{map-get($componentInfo, 'location')}
*/


.embl-grid {
  & > :first-child {
    grid-column: 1 / -1;

    @media (min-width: 846px) {
      grid-column: span 1;
    }
  }

  & > *:not(:first-child) {
    @media (max-width: 845px) {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: $vf-breakpoint--sm) {
    /* stylelint-disable declaration-colon-space-after */
    --embl-grid:
      var(--embl-grid-module--prime)
      [main-start]
      repeat(auto-fit, minmax(200px, 1fr))
      [main-end];

    display: grid;
    gap: var(--page-grid-gap);
    grid-template-columns: var(--vf-custom-grid-layout, var(--embl-grid));
  }
}

.embl-grid--has-centered-content {
  & > *:last-child {
    grid-column-start: 2;
  }

  @media (min-width: $vf-breakpoint--lg) {
    --embl-grid:
      var(--embl-grid-module--prime)
      auto
      var(--embl-grid-module--prime);
    & > *:last-child {
      grid-column-start: unset;
    }
  }
}

.embl-grid--has-sidebar {
  --embl-grid:
    var(--embl-grid-module--prime)
    [main-start]
    1fr
    [main-end]
    21em;

  @media (min-width: 846px) and (max-width: 1023px) {
    & > *:first-child {
      grid-column: 1 / 2;
    }
    & > * {
      grid-column: 2 / -1;
    }
  }
  @media (min-width: 1024px) and (max-width: 1299px) {
    --embl-grid:
      var(--embl-grid-module--prime)
      [main-start]
      1fr
      [main-end]
      18em;
  }
  /* stylelint-enable */
}

.embl-grid-has-sidebar--hairline {
  @media (min-width: $vf-breakpoint--lg) {
    & > *:last-child {
      position: relative;
    }
    & > *:last-child::before {
      background-color: ui-color(grey);
      content: '';
      height: 100%;
      left: calc(var(--page-grid-gap) / -2);
      position: absolute;
      width: 1px;
    }
  }
}