@use 'sass:math';

.ons-grid {
    box-sizing: border-box;
    font-size: 0;
    margin-left: -$grid-gutters;

    &--float {
        letter-spacing: 0;
    }

    &--center {
        text-align: center;

        .ons-grid__col {
            text-align: left;
        }

        &-all {
            text-align: center;
        }
    }

    &--reverse {
        direction: rtl;

        .ons-grid__col {
            direction: ltr;
        }
    }

    &--spaced {
        .ons-grid__col {
            margin-bottom: $grid-gutters;
        }

        &.ons-grid--tight {
            .ons-grid__col {
                margin-bottom: math.div($grid-gutters, 2);
            }
        }
    }

    &--align-mid {
        .ons-grid__col {
            vertical-align: middle;
        }
    }

    &--stagger-align {
        .ons-grid__col:nth-of-type(1n) {
            text-align: right;
        }

        .ons-grid__col:nth-of-type(2n) {
            text-align: left;
        }
    }

    &--tight {
        margin-left: math.div(-$grid-gutters, 2);

        .ons-grid__col {
            padding-left: math.div($grid-gutters, 2);
        }
    }

    &--loose {
        margin-left: -$grid-gutters * 2;
    }

    &--gutterless {
        margin-left: 0;

        .ons-grid__col {
            padding-left: 0;
        }
    }

    &--pixelgutter {
        margin-left: 1px;

        .ons-grid__col {
            margin-bottom: 1px;
            padding-left: 1px;
        }
    }

    &-flex {
        display: flex;
        flex-flow: row wrap;

        &--center {
            justify-content: center;
        }

        &--between {
            justify-content: space-between;
        }

        &--vertical-top {
            align-items: start;
        }

        &--vertical-center {
            align-items: center;
        }
    }

    &-flex-gap {
        display: flex;
        margin-left: 0;
        flex-flow: column nowrap;

        @include mq('m') {
            flex-direction: row;
        }

        &--xl {
            column-gap: 2rem;
        }

        &--l {
            column-gap: 1.5rem;
        }

        &--m {
            column-gap: 1.25rem;
        }

        &--s {
            column-gap: 1rem;
        }
    }

    &__col {
        background-clip: content-box;
        box-sizing: border-box;
        display: inline-block;
        // Fixes text overflow issues
        min-width: 0;
        padding-left: $grid-gutters;
        vertical-align: top;
        width: 100%;

        .ons-grid--float & {
            display: block;
            float: left;
        }

        .ons-grid-flex-gap & {
            padding-left: 0;
        }

        &--sticky\@m {
            /* if parent element is set to flex, override the default align-self property
            from stretch to flex-start so that it stays sticky on scroll after medium breakpoint - 
            this is set for the table of contents component specifically */
            .ons-grid-flex &,
            .ons-grid-flex-gap & {
                align-self: flex-start;
            }
        }

        &--loose {
            padding-left: $grid-gutters * 2;
        }

        &--flex {
            display: flex;
        }

        &--flex-col {
            display: flex;
            flex-direction: column;
        }

        &--stretch {
            align-self: stretch;
        }

        .ons-grid-flex & {
            width: auto;

            // keep header menu columns 100% width
            &.ons-header-nav-menu__col {
                width: 100%;
            }
        }
    }
}

@include bp-suffix(ons-grid-flex--no-wrap) {
    flex-wrap: nowrap;
}

@include bp-suffix(ons-grid-flex--column, $create-between-breakpoints: true) {
    flex-direction: column;
}

@include bp-suffix(ons-grid--bordered, false) {
    margin-left: 0;

    .ons-grid__col {
        border-bottom: 1px solid var(--ons-color-borders);
        border-top: 1px solid var(--ons-color-borders);
        flex: 1 1 auto;
        padding-bottom: 1rem;
        padding-top: 1rem;
        &:first-of-type {
            border-right: 1px solid var(--ons-color-borders);
            padding-left: 0;
        }
    }
}

@include bp-suffix(ons-grid__col--sticky) {
    position: sticky;
    top: 2rem;
}

@each $breakpoint-min, $size in $grid-bp {
    @for $column from 1 through $grid-cols {
        $width: math.percentage(math.div($column, $grid-cols));

        @include mq($breakpoint-min) {
            .ons-col-#{$column}\@#{$breakpoint-min} {
                max-width: $width;
                width: $width;
            }

            .ons-push-#{$column}\@#{$breakpoint-min} {
                left: $width;
                position: relative;
            }

            .ons-pull-#{$column}\@#{$breakpoint-min} {
                left: -$width;
                position: relative;
            }
        }
    }

    @each $breakpoint-max, $size in $grid-bp {
        @for $column from 1 through $grid-cols {
            $width: math.percentage(math.div($column, $grid-cols));

            @include mq($breakpoint-min, $breakpoint-max) {
                .ons-col-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
                    max-width: $width;
                    width: $width;
                }

                .ons-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
                    left: $width;
                    position: relative;
                }

                .ons-pull-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
                    left: -$width;
                    position: relative;
                }
            }
        }
    }
}

@include bp-suffix(ons-col-auto) {
    width: auto;

    .ons-grid-flex & {
        flex-basis: auto;
        max-width: 100%;
    }
}

@include bp-suffix(ons-u-flex-shrink) {
    flex-shrink: 1;
}

@include bp-suffix(ons-u-flex-no-shrink) {
    flex-shrink: 0;
}

@include bp-suffix(ons-u-flex-grow) {
    flex-grow: 1;
}

@include bp-suffix(ons-u-flex-no-grow) {
    flex-grow: 0;
}

@include bp-suffix(ons-u-flex-no-basis) {
    flex-basis: 0;
}

@include bp-suffix(ons-u-flex-align-bottom) {
    align-self: flex-end;
}

@include bp-suffix('ons-nopull-', false) {
    left: 0;
}

@include bp-suffix('ons-nopush-', false) {
    left: 0;
}