// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations

@use 'true' as *;
@use '../../src/bem';

//
// Included test cases:
//  - /// 1 ///  - single element, single related element
//  - /// 2 ///  - single element, single related element, manual selector in-between
//  - /// 3 ///  - single element, single related element, modifier in-between
//  - /// 4 ///  - single element, multiple related elements
//  - /// 5 ///  - single element, multiple related elements, manual selector in-between
//  - /// 6 ///  - single element, multiple related elements, modifier in-between
//  - /// 7 ///  - multiple elements, single related element
//  - /// 8 ///  - multiple elements, single related element, manual selector in-between
//  - /// 9 ///  - multiple elements, single related element, modifier in-between
//  - /// 10 /// - multiple elements, multiple related elements
//  - /// 11 /// - multiple elements, multiple related elements, manual selector in-between
//  - /// 12 /// - multiple elements, multiple related elements, modifier in-between
//

@include it('related-element') {
    @include assert('single element, single related element') { /// 1 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child') {
                    @include bem.related-elem('+', 'subchild1') {
                        font-size: 2em;
                    }

                    @include bem.related-elem('~', 'subchild2') {
                        font-size: 2em;
                    }
                }
            }
        }

        @include expect {
            .something__child + .something__subchild1 {
                font-size: 2em;
            }

            .something__child ~ .something__subchild2 {
                font-size: 2em;
            }
        }
    }

    @include assert('single element, single related element, manual selector in-between') { /// 2 ///
        @include output(false) {
            @include bem.block('something') {
                @include bem.elem('child') {
                    &:hover {
                        @include bem.related-elem('+', 'subchild1') {
                            font-size: 2em;
                        }

                        @include bem.related-elem('~', 'subchild2') {
                            font-size: 2em;
                        }
                    }

                    .test & {
                        @include bem.related-elem('+', 'subchild3') {
                            font-size: 2em;
                        }

                        @include bem.related-elem('~', 'subchild4') {
                            font-size: 2em;
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something__child:hover + .something__subchild1 {
                font-size: 2em;
            }

            .something__child:hover ~ .something__subchild2 {
                font-size: 2em;
            }

            .test .something__child + .something__subchild3 {
                font-size: 2em;
            }

            .test .something__child ~ .something__subchild4 {
                font-size: 2em;
            }
        }
    }

    @include assert('single element, single related element, modifier in-between') { /// 3 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child') {
                    @include bem.modifier('mod') {
                        @include bem.related-elem('+', 'subchild1') {
                            font-size: 2.5em;
                        }

                        @include bem.related-elem('~', 'subchild2') {
                            font-size: 2.5em;
                        }
                    }
                }
            }
        }

        @include expect {
            .something__child--mod + .something__subchild1 {
                font-size: 2.5em;
            }

            .something__child--mod ~ .something__subchild2 {
                font-size: 2.5em;
            }
        }
    }

    @include assert('single element, multiple related elements') { /// 4 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child') {
                    @include bem.related-elem('+', 'subchild1', 'subchild2') {
                        font-size: 2.5em;
                    }

                    @include bem.related-elem('~', 'subchild3', 'subchild4') {
                        font-size: 2.5em;
                    }
                }
            }
        }

        @include expect {
            .something__child + .something__subchild1,
            .something__child + .something__subchild2 {
                font-size: 2.5em;
            }

            .something__child ~ .something__subchild3,
            .something__child ~ .something__subchild4 {
                font-size: 2.5em;
            }
        }
    }

    @include assert('single element, multiple related elements, manual selector in-between') { /// 5 ///
        @include output(false) {
            @include bem.block('something') {
                @include bem.elem('child') {
                    &:hover {
                        @include bem.related-elem('+', 'subchild1', 'subchild2') {
                            font-size: 2.5em;
                        }

                        @include bem.related-elem('~', 'subchild3', 'subchild4') {
                            font-size: 2.5em;
                        }
                    }

                    .test & {
                        @include bem.related-elem('+', 'subchild5', 'subchild6') {
                            font-size: 2.5em;
                        }

                        @include bem.related-elem('~', 'subchild7', 'subchild8') {
                            font-size: 2.5em;
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something__child:hover + .something__subchild1,
            .something__child:hover + .something__subchild2 {
                font-size: 2.5em;
            }

            .something__child:hover ~ .something__subchild3,
            .something__child:hover ~ .something__subchild4 {
                font-size: 2.5em;
            }

            .test .something__child + .something__subchild5,
            .test .something__child + .something__subchild6 {
                font-size: 2.5em;
            }

            .test .something__child ~ .something__subchild7,
            .test .something__child ~ .something__subchild8 {
                font-size: 2.5em;
            }
        }
    }

    @include assert('single element, multiple related elements, modifier in-between') { /// 6 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child') {
                    @include bem.modifier('mod') {
                        @include bem.related-elem('+', 'subchild1', 'subchild2') {
                            font-size: 2.5em;
                        }

                        @include bem.related-elem('~', 'subchild3', 'subchild4') {
                            font-size: 2.5em;
                        }
                    }
                }
            }
        }

        @include expect {
            .something__child--mod + .something__subchild1,
            .something__child--mod + .something__subchild2 {
                font-size: 2.5em;
            }

            .something__child--mod ~ .something__subchild3,
            .something__child--mod ~ .something__subchild4 {
                font-size: 2.5em;
            }
        }
    }

    @include assert('multiple elements, single related element') { /// 7 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child1', 'child2') {
                    @include bem.related-elem('+', 'subchild1') {
                        font-size: 2em;
                    }

                    @include bem.related-elem('~', 'subchild2') {
                        font-size: 2em;
                    }
                }
            }
        }

        @include expect {
            .something__child1 + .something__subchild1,
            .something__child2 + .something__subchild1 {
                font-size: 2em;
            }

            .something__child1 ~ .something__subchild2,
            .something__child2 ~ .something__subchild2 {
                font-size: 2em;
            }
        }
    }

    @include assert('multiple elements, single related element, manual selector in-between') { /// 8 ///
        @include output(false) {
            @include bem.block('something') {
                @include bem.elem('child1', 'child2') {
                    &:hover {
                        @include bem.related-elem('+', 'subchild1') {
                            font-size: 2em;
                        }

                        @include bem.related-elem('~', 'subchild2') {
                            font-size: 2em;
                        }
                    }

                    .test & {
                        @include bem.related-elem('+', 'subchild3') {
                            font-size: 2em;
                        }

                        @include bem.related-elem('~', 'subchild4') {
                            font-size: 2em;
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something__child1:hover + .something__subchild1,
            .something__child2:hover + .something__subchild1 {
                font-size: 2em;
            }

            .something__child1:hover ~ .something__subchild2,
            .something__child2:hover ~ .something__subchild2 {
                font-size: 2em;
            }

            .test .something__child1 + .something__subchild3,
            .test .something__child2 + .something__subchild3 {
                font-size: 2em;
            }

            .test .something__child1 ~ .something__subchild4,
            .test .something__child2 ~ .something__subchild4 {
                font-size: 2em;
            }
        }
    }

    @include assert('multiple elements, single related element, modifier in-between') { /// 9 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child1', 'child2') {
                    @include bem.modifier('mod') {
                        @include bem.related-elem('+', 'subchild1') {
                            font-size: 2.5em;
                        }

                        @include bem.related-elem('~', 'subchild2') {
                            font-size: 2.5em;
                        }
                    }
                }
            }
        }

        @include expect {
            .something__child1--mod + .something__subchild1,
            .something__child2--mod + .something__subchild1 {
                font-size: 2.5em;
            }

            .something__child1--mod ~ .something__subchild2,
            .something__child2--mod ~ .something__subchild2 {
                font-size: 2.5em;
            }
        }
    }

    @include assert('multiple elements, multiple related elements') { /// 10 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child1', 'child2') {
                    @include bem.related-elem('+', 'subchild1', 'subchild2') {
                        font-size: 2em;
                    }

                    @include bem.related-elem('~', 'subchild3', 'subchild4') {
                        font-size: 2em;
                    }
                }
            }
        }

        @include expect {
            .something__child1 + .something__subchild1,
            .something__child2 + .something__subchild1,
            .something__child1 + .something__subchild2,
            .something__child2 + .something__subchild2 {
                font-size: 2em;
            }

            .something__child1 ~ .something__subchild3,
            .something__child2 ~ .something__subchild3,
            .something__child1 ~ .something__subchild4,
            .something__child2 ~ .something__subchild4 {
                font-size: 2em;
            }
        }
    }

    @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 ///
        @include output(false) {
            @include bem.block('something') {
                @include bem.elem('child1', 'child2') {
                    &:hover {
                        @include bem.related-elem('+', 'subchild1', 'subchild2') {
                            font-size: 2em;
                        }

                        @include bem.related-elem('~', 'subchild3', 'subchild4') {
                            font-size: 2em;
                        }
                    }

                    .test & {
                        @include bem.related-elem('+', 'subchild5', 'subchild6') {
                            font-size: 2em;
                        }

                        @include bem.related-elem('~', 'subchild7', 'subchild8') {
                            font-size: 2em;
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something__child1:hover + .something__subchild1,
            .something__child2:hover + .something__subchild1,
            .something__child1:hover + .something__subchild2,
            .something__child2:hover + .something__subchild2 {
                font-size: 2em;
            }

            .something__child1:hover ~ .something__subchild3,
            .something__child2:hover ~ .something__subchild3,
            .something__child1:hover ~ .something__subchild4,
            .something__child2:hover ~ .something__subchild4 {
                font-size: 2em;
            }

            .test .something__child1 + .something__subchild5,
            .test .something__child2 + .something__subchild5,
            .test .something__child1 + .something__subchild6,
            .test .something__child2 + .something__subchild6 {
                font-size: 2em;
            }

            .test .something__child1 ~ .something__subchild7,
            .test .something__child2 ~ .something__subchild7,
            .test .something__child1 ~ .something__subchild8,
            .test .something__child2 ~ .something__subchild8 {
                font-size: 2em;
            }
        }
    }

    @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child1', 'child2') {
                    @include bem.modifier('mod') {
                        @include bem.related-elem('+', 'subchild1', 'subchild2') {
                            font-size: 2em;
                        }

                        @include bem.related-elem('~', 'subchild3', 'subchild4') {
                            font-size: 2em;
                        }
                    }
                }
            }
        }

        @include expect {
            .something__child1--mod + .something__subchild1,
            .something__child2--mod + .something__subchild1,
            .something__child1--mod + .something__subchild2,
            .something__child2--mod + .something__subchild2 {
                font-size: 2em;
            }

            .something__child1--mod ~ .something__subchild3,
            .something__child2--mod ~ .something__subchild3,
            .something__child1--mod ~ .something__subchild4,
            .something__child2--mod ~ .something__subchild4 {
                font-size: 2em;
            }
        }
    }
}