@import '../../../styles/definitions/placeholders';
@import '../../../styles/grid.scss';
@import '../../../styles/mixins.scss';
@import '../../../styles/definitions/breakpoints';

%grid-row {
    margin-right: $grid-gutter-width * -1;
    margin-left: $grid-gutter-width * -1;
}

%grid-column {
    padding-right: $grid-gutter-width;
    padding-left: $grid-gutter-width;
}

.productPlan {
    &_row {
        @extend %grid-row;

        @include media-md-up {
            display: flex;
        }
    }
    &_title {
        @include title-1;
        margin: 0 0 23px;
    }
    &_bullets,
    &_footnotes {
        @extend %grid-column;
    }
    &_bullets {
        &--with-footnotes {
            @include media-md-up {
                @include grid-width(6);
            }
            @include media-lg-up {
                @include grid-width(8);
            }
            @include media-xl-up {
                @include grid-width(9);
            }
        }
    }
    &_footnotes {
        &--with-bullets {
            @include media-md-up {
                @include grid-width(6);
            }
            @include media-lg-up {
                @include grid-width(4);
            }
            @include media-xl-up {
                @include grid-width(3);
            }
        }
    }
    &_bullet {
        $bullet-per-row: 4;
        @extend %grid-column;

        padding-bottom: 4px;
        margin-bottom: $grid-gutter-height;

        &List {
            @extend %reset-list;
            @extend %grid-row;
        }

        @include media-md-up {
            @include grid-width(12 / ($bullet-per-row - 2));

            &List {
                display: flex;
                flex-wrap: wrap;
            }

            &--with-footnotes {
                @include grid-width(12 / ($bullet-per-row - 3));
            }
        }
        @include media-lg-up {
            @include grid-width(12 / ($bullet-per-row - 1));

            &--with-footnotes {
                @include grid-width(12 / ($bullet-per-row - 2));
            }
        }
        @include media-xl-up {
            @include grid-width(12 / $bullet-per-row);

            &--with-footnotes {
                @include grid-width(12 / ($bullet-per-row - 1));
            }
        }
    }
    &_footnotes {
        &--with-bullets {
            @include media-md-down {
                margin-top: 30px;
            }
        }
        &:not(&--with-bullets) {
            @include media-lg-up {
                @include grid-width(8);
                margin: 0 auto;
            }
        }
    }
    &_footnote {
        margin: 0;

        & + & {
            margin-top: 10px;
        }
    }
    &_bullet,
    &_footnote {
        font-size: $headingFontSize5;
    }
}