//
// Grid component styles
//

// ---- Modules ----

@use "../../shared/media";
@use "../../shared/style";
@use "../../shared/theme";
@use "sass:math";

// Selector prefix
$prefix: "cwf" !default;

// ---- Grid system ----

// Automatic grid properties
$display: grid !default;
$gap: 1rem !default;
$columns: 5 !default;
$margin-bottom: 1rem !default;
$gap--max: $gap * ($columns - 1) !default; // Calculates the max amount of gaps
$available-space: calc(
    100% - var(--cwf-grid--gap--max)
) !default; // Calculates the available space for columns
$column__min-width: calc(
    var(--cwf-grid--available-space) / var(--cwf-grid--columns)
) !default; // Calculates the min width of columns

// Automatic grid column templates
$grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !default;
$grid-template-columns--md: repeat(
    auto-fit,
    minmax(var(--cwf-grid__column--min-width), 1fr)
) !default;

.#{$prefix}-grid {
    --cwf-grid--display: #{$display};
    --cwf-grid--gap: #{$gap};
    --cwf-grid--margin-bottom: #{$margin-bottom};
    --cwf-grid--gap--max: #{$gap--max};
    --cwf-grid--available-space: #{$available-space};
    --cwf-grid--columns: #{$columns};
    --cwf-grid__column--min-width: #{$column__min-width};
    --cwf-grid--grid-template-columns: #{$grid-template-columns};
    display: var(--cwf-grid--display);
    gap: var(--cwf-grid--gap);
    margin-bottom: var(--cwf-grid--margin-bottom);
    grid-template-columns: var(--cwf-grid--grid-template-columns);

    @include media.breakpoint {
        --cwf-grid--grid-template-columns: #{$grid-template-columns--md};
    }

    & > * {
        margin-bottom: 0 !important;
    }
}

// Explicit grid column template
$grid-template-columns--n-columns: repeat(
    var(--cwf-grid--columns),
    1fr
) !default;

@for $count from 2 through $columns {
    .#{$prefix}-grid--#{$count}-columns {
        @include media.breakpoint {
            --cwf-grid--columns: #{$count};
            --cwf-grid--grid-template-columns: #{$grid-template-columns--n-columns};
        }
    }
}

// Column
.#{$prefix}-grid__column {
    // Explicit column spanning
    @for $count from 2 through $columns {
        &--span-#{$count} {
            @include media.breakpoint {
                grid-column-end: span $count;
            }
        }
    }

    // Full-width column spanning
    &--span-all {
        @include media.breakpoint {
            grid-column: 1/-1;
        }
    }

    // Explicit column start
    @for $count from 1 through $columns - 1 {
        &--start-#{$count} {
            @include media.breakpoint {
                grid-column-start: $count;
            }
        }
    }
}

// ---- Page layout ----

// Page layout grid, side columns
$column--page-layout--sides__max-width: 320px !default;
$column--page-layout--sides__width: fit-content(
    $column--page-layout--sides__max-width
) !default;
$column--page-layout--sides__content-width: calc(
    #{$column--page-layout--sides__max-width} - #{$gap}
) !default;

// Page layout grid, main column
$column--page-layout--main__max-width: calc(
    #{theme.contain--max-width()} - #{$column--page-layout--sides__max-width}
) !default;
$column--page-layout--main__width: minmax(0, 1fr) !default;

// Page layout grid gap
$gap--page-layout: 0 !default;
$flex--page-layout: 1 !default;
$padding--page-layout: math.div($gap, 2) !default;
$padding--page-layout--md: $padding--page-layout 0 !default;

// Page layout grid (medium breakpoint)
$grid-template-columns--page-layout--md: $column--page-layout--sides__width
    $column--page-layout--main__width !default;
$grid-template-areas--page-layout--md: "subnav main" "subnav sidebar" !default;

// Page layout grid (large breakpoint)
$grid-template-columns--page-layout--lg: $column--page-layout--sides__width
    $column--page-layout--main__width $column--page-layout--sides__width !default;
$grid-template-areas--page-layout--lg: "subnav main sidebar" !default;

.#{$prefix}-grid--page-layout {
    --cwf-grid--gap: #{$gap--page-layout};
    --cwf-grid--flex: #{$flex--page-layout};
    --cwf-grid--padding: #{$padding--page-layout};
    padding: var(--cwf-grid--padding);
    flex: var(--cwf-grid--flex);
    @include theme.contain;

    @include media.breakpoint {
        --cwf-grid--padding: #{$padding--page-layout--md};
        --cwf-grid--grid-template-columns: #{$grid-template-columns--page-layout--md};
        grid-template-areas: $grid-template-areas--page-layout--md;
    }

    @include media.breakpoint("lg") {
        --cwf-grid--grid-template-columns: #{$grid-template-columns--page-layout--lg};
        grid-template-areas: $grid-template-areas--page-layout--lg;
    }
}

// Page layout grid, column
$column--page-layout__padding: $padding--page-layout !default;
$column--page-layout__padding--md: $padding--page-layout $gap !default;

.#{$prefix}-grid__column--page-layout {
    --cwf-grid__column--padding: #{$column--page-layout__padding};
    padding: var(--cwf-grid__column--padding);

    @include style.children("margins", "last");

    @include media.breakpoint {
        --cwf-grid__column--padding: #{$column--page-layout__padding--md};
    }
}

.#{$prefix}-grid__column--page-layout--subnav {
    @include media.breakpoint {
        grid-area: subnav;
    }
}

.#{$prefix}-grid__column--page-layout--main {
    @include media.breakpoint {
        grid-area: main;
        width: 100%;
        max-width: $column--page-layout--main__max-width;
        margin-left: auto;
        margin-right: auto;
    }
}

.#{$prefix}-grid__column--page-layout--sidebar {
    @include media.breakpoint {
        grid-area: sidebar;
    }
}

.#{$prefix}-grid__column--page-layout--subnav,
.#{$prefix}-grid__column--page-layout--sidebar {
    & > * {
        min-width: $column--page-layout--sides__content-width;
    }
}