@import "../variables/variables";

:root {
    --page-grid-number-cols: #{$_page-grid-number-cols-small};
    --page-grid-outside-margins: #{$_page-grid-outside-margins-small};
    --page-grid-column-gaps: #{$_page-grid-column-gaps-small};
    --page-grid-row-gaps: #{$_page-grid-row-gaps-large};
    --page-grid-column-widths: calc(
        (100% / #{$_page-grid-number-cols-small}) -
            #{$_page-grid-column-gaps-small} + 1px
    );
    --page-grid-max-width: #{$_page-grid-max-width};
    /* TODO: determine if needed. This is the max width inclusive of outside margins (not currently used) */
    --page-grid-total-max-width: calc(
        var(--page-grid-max-width) + (var(--page-grid-outside-margins) * 2)
    );

    @media (min-width: $_screen-size-SM) {
        --page-grid-number-cols: #{$_page-grid-number-cols-large};
        --page-grid-column-gaps: #{$_page-grid-column-gaps-large};
        --page-grid-column-widths: calc(
            (100% / #{$_page-grid-number-cols-large}) -
                #{$_page-grid-column-gaps-large} + 1px
        );
        --page-grid-outside-margins: #{$_page-grid-outside-margins-large};
    }

    @media (min-width: $_screen-size-XL) {
        --page-grid-outside-margins: #{$_page-grid-outside-margins-max};
    }
}

/* Mobile-first implies defaults, there is no "first" breakpoint,
   and we don't need a minimum viewport width to support. */
.page-grid-container {
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--page-grid-max-width);
    padding-left: var(--page-grid-outside-margins);
    padding-right: var(--page-grid-outside-margins);
    position: relative;
    width: 100%;
}

.page-grid {
    column-gap: var(--page-grid-column-gaps);
    display: grid;
    grid-template-columns: repeat(
        var(--page-grid-number-cols),
        var(--page-grid-column-widths)
    );
    row-gap: var(--page-grid-row-gaps);
}

/* handle subgrid */
/* fallback for lack of subgrid support in client browser */
/* @TODO remove .subgrid in next major version */
.subgrid,
.page-grid__subgrid {
    display: grid;
}

/* subgrid supported */
@supports (grid-template-columns: subgrid) {
    /* @TODO remove .subgrid  in next major version */
    .subgrid,
    .page-grid__subgrid {
        grid-template-columns: subgrid;
    }
}

/* handle nested grid */
.page-grid-container .nested-grid-container {
    max-width: 100%;
    padding: 0;
    width: 100%;
}

/* prettier-ignore */
.page-grid--debug {
    --debug-grid-col-color: pink;
    --debug-grid-gutter-color: transparent;

    /* stylelint-disable-next-line */
    background: repeating-linear-gradient(
        90deg,
        var(--debug-grid-col-color) 0,
        var(--debug-grid-col-color) var(--page-grid-column-widths),
        var(--debug-grid-gutter-color) var(--page-grid-column-widths),
        var(--debug-grid-gutter-color) calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps))
    );
}
