// vf-ui-fullbleed

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

/*
 *  1. we set the  variable for the @at-root directive here.
 *  2. position: relative is needed for the pseudo element.
 *  3. make the background colour inherit from classanmes in use.
 *  4. if we can a full bleed background inline with other content we need to reset
 *     the grid to fill all that space.
 *  5. make the pseudo element 100% of the element so we can see it.
 *  6. push the pseudo element away from the left of the viewport but allows for potential
 *     'context customisation'.
 *  7. If the component has vertical padding we need to make sure the pseudo element
 *     is set to the top of the containing box.
 *  8. make the pseudo element full-width but allows for potential 'context customisation'.
 *  9. put the pseudo element 'underneath' the element so it doesn't block.
 * 10. Because Windows always shows scrollbars this technique creats a horizontal
 *     scroll bar, we need to apply position: relative; to a parent element.
       Encapsulating this CSS rule inside the component means it would only be set
       if the site includes this component and it's CSS.
 */

.vf-u-fullbleed {
  $vf-u-fullbleed-parent: body !default; /* 1 */

  background-position: center center;
  background-repeat: no-repeat;
  background-size: 0 0;

  position: relative; /* 2 */

  &::before {
    background-color: inherit; /* 3 */
    background-image: inherit;
    background-position: inherit;
    background-repeat: inherit;
    background-size: cover;
    content: '';
    grid-column: 1 / -1; /* 4 */
    height: 100%; /* 5 */
    margin-left: calc(50% - 50vw);
    margin-left: calc(50% - calc(50vw - var(--context-margin--inline, 0px))); /* 6 */
    position: absolute;
    top: 0; /* 7 */
    width: 100vw;
    width: calc(100vw - (var(--context-margin--inline, 0px) * 2)); /* 8 */
    z-index: set-layer(vf-z-index--negative); /* 9 */
  }

  @at-root #{$vf-u-fullbleed-parent} {
    position: relative; /* 10 */
  }
}