// vf-inlay

@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')}
 */

@import 'vf-inlay.variables.scss';

html:not(.vf-disable-deprecated) {

  // Deprecated in 1.0.0-beta.7
  // Will be removed in v2.0
  .vf-inlay::before {
    content: 'CSS `:before` content and custom rules that can be conditionally disabled with a parent `.vf-disable-deprecated` selector.';
  }
}

.vf-inlay__content {
  grid-column: 1 / -1;

  .vf-inlay > & {
    display: grid;
    grid-gap: var(--page-grid-gap);
    /*stylelint-disable*/
    grid-template-columns:
      [inlay--full-start]
        1fr
      [inlay--full-end]
    ;

    @media (min-width: $vf-breakpoint--lg) {
      grid-template-columns:
        [inlay--full-start inlay--main-start]
          1fr
        [inlay--main-end inlay--sidebar-start]
          minmax(auto, var(--embl-grid-sidebar-width, 21.25rem))
        [inlay--sidebar-end inlay--full-end]
      ;
    }
  }
  /*stylelint-enable*/
}

.vf-inlay__content--full-width {
  grid-area: inlay--full;
  grid-row: span 1;
}

.vf-inlay__content--main {
  grid-area: inlay--full;
  grid-row: span 1;

  @media (min-width: $vf-breakpoint--lg) {
    grid-area: inlay--main;
  }

}

.vf-inlay__content--additional {
  grid-area: inlay--full;
  grid-row: span 1;

  @media (min-width: $vf-breakpoint--lg) {
    grid-area: inlay--sidebar;
  }
}