// 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 ///  - block modifier
//  - /// 2 ///  - block modifier, in at-theme
//  - /// 3 ///  - element modifier, single element
//  - /// 4 ///  - element modifier, multiple elements
//  - /// 5 ///  - element modifier, single related element
//  - /// 6 ///  - element modifier, multiple related elements
//  - /// 7 ///  - element modifier, single element, manual selector before
//  - /// 8 ///  - element modifier, multiple elements, manual selector before
//  - /// 9 ///  - element modifier, single related element, manual selector before
//  - /// 10 /// - element modifier, multiple related elements, manual selector before
//  - /// 11 /// - element modifier, in at-theme
//  - /// 12 /// - nested block modifiers, extending
//  - /// 13 /// - nested element modifiers, extending
//  - /// 14 /// - block and element modifiers, single element
//  - /// 15 /// - block and element modifiers, multiple elements
//

@include it('modifier') {
    @include assert('block modifier') { /// 1 ///
        @include output {
            @include bem.block('something') {
                @include bem.modifier('mod') {
                    font-size: 1.5em;

                    @include bem.modifier('submod') {
                        font-size: 1.75em;
                    }
                }
            }
        }

        @include expect {
            .something--mod {
                font-size: 1.5em;
            }

            .something--mod.something--submod {
                font-size: 1.75em;
            }
        }
    }

    @include assert('block modifier, in at-theme') { /// 2 ///
        @include output(false) {
            @include bem.block('something') {
                @include bem.at-theme('dark') {
                    @include bem.modifier('mod') {
                        font-size: 1.5em;

                        @include bem.modifier('submod') {
                            font-size: 1.75em;
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .t-dark .something--mod,
            [class*=' t-'] .t-dark .something--mod,
            [class^='t-'] .t-dark .something--mod {
                font-size: 1.5em;
            }

            .t-dark .something--mod.something--submod,
            [class*=' t-'] .t-dark .something--mod.something--submod,
            [class^='t-'] .t-dark .something--mod.something--submod {
                font-size: 1.75em;
            }
        }
    }

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

                        @include bem.modifier('submod') {
                            font-size: 2.75em;
                        }
                    }
                }
            }
        }

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

            .something__child--mod.something__child--submod {
                font-size: 2.75em;
            }
        }
    }

    @include assert('element modifier, multiple elements') { /// 4 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child1', 'child2') {
                    @include bem.modifier('mod') {
                        font-size: 2.5em;

                        @include bem.modifier('submod') {
                            font-size: 2.75em;
                        }
                    }
                }
            }
        }

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

            .something__child1--mod.something__child1--submod,
            .something__child2--mod.something__child2--submod {
                font-size: 2.75em;
            }
        }
    }

    @include assert('element modifier, single related element') { /// 5 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child1') {
                    @include bem.next-elem('child2') {
                        @include bem.modifier('mod') {
                            font-size: 2.5em;

                            @include bem.modifier('submod') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }
            }
        }

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

            .something__child1 + .something__child2--mod.something__child2--submod {
                font-size: 2.75em;
            }
        }
    }

    @include assert('element modifier, multiple related elements') { /// 6 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child1') {
                    @include bem.next-elem('child2', 'child3') {
                        @include bem.modifier('mod') {
                            font-size: 2.5em;

                            @include bem.modifier('submod') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }
            }
        }

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

            .something__child1 + .something__child2--mod.something__child2--submod,
            .something__child1 + .something__child3--mod.something__child3--submod {
                font-size: 2.75em;
            }
        }
    }

    @include assert('element modifier, single element, manual selector before') { /// 7 ///
        @include output(false) {
            @include bem.block('something') {
                &:hover {
                    @include bem.elem('child1') {
                        @include bem.modifier('mod') {
                            font-size: 2.5em;

                            @include bem.modifier('submod') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }

                .test & {
                    @include bem.elem('child2') {
                        @include bem.modifier('mod') {
                            font-size: 2.5em;

                            @include bem.modifier('submod') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something:hover .something__child1--mod {
                font-size: 2.5em;
            }

            .something:hover .something__child1--mod.something__child1--submod {
                font-size: 2.75em;
            }

            .test .something__child2--mod {
                font-size: 2.5em;
            }

            .test .something__child2--mod.something__child2--submod {
                font-size: 2.75em;
            }
        }
    }

    @include assert('element modifier, multiple elements, manual selector before') { /// 8 ///
        @include output(false) {
            @include bem.block('something') {
                &:hover {
                    @include bem.elem('child1', 'child2') {
                        @include bem.modifier('mod') {
                            font-size: 2.5em;

                            @include bem.modifier('submod') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }

                .test & {
                    @include bem.elem('child3', 'child4') {
                        @include bem.modifier('mod') {
                            font-size: 2.5em;

                            @include bem.modifier('submod') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something:hover .something__child1--mod,
            .something:hover .something__child2--mod {
                font-size: 2.5em;
            }

            .something:hover .something__child1--mod.something__child1--submod,
            .something:hover .something__child2--mod.something__child2--submod {
                font-size: 2.75em;
            }

            .test .something__child3--mod,
            .test .something__child4--mod {
                font-size: 2.5em;
            }

            .test .something__child3--mod.something__child3--submod,
            .test .something__child4--mod.something__child4--submod {
                font-size: 2.75em;
            }
        }
    }

    @include assert('element modifier, single related element, manual selector before') { /// 9 ///
        @include output(false) {
            @include bem.block('something') {
                &:hover {
                    @include bem.elem('child1') {
                        @include bem.next-elem('child2') {
                            @include bem.modifier('mod1') {
                                font-size: 2.5em;

                                @include bem.modifier('submod1') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }
                }

                .test & {
                    @include bem.elem('child3') {
                        @include bem.next-elem('child4') {
                            @include bem.modifier('mod1') {
                                font-size: 2.5em;

                                @include bem.modifier('submod1') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }
                }

                @include bem.elem('child5') {
                    &:hover {
                        @include bem.next-elem('child6') {
                            @include bem.modifier('mod2') {
                                font-size: 2.5em;

                                @include bem.modifier('submod2') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }

                    .test & {
                        @include bem.next-elem('child7') {
                            @include bem.modifier('mod2') {
                                font-size: 2.5em;

                                @include bem.modifier('submod2') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something:hover .something__child1 + .something__child2--mod1 {
                font-size: 2.5em;
            }

            .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 {
                font-size: 2.75em;
            }

            .test .something__child3 + .something__child4--mod1 {
                font-size: 2.5em;
            }

            .test .something__child3 + .something__child4--mod1.something__child4--submod1 {
                font-size: 2.75em;
            }

            .something__child5:hover + .something__child6--mod2 {
                font-size: 2.5em;
            }

            .something__child5:hover + .something__child6--mod2.something__child6--submod2 {
                font-size: 2.75em;
            }

            .test .something__child5 + .something__child7--mod2 {
                font-size: 2.5em;
            }

            .test .something__child5 + .something__child7--mod2.something__child7--submod2 {
                font-size: 2.75em;
            }
        }
    }

    @include assert('element modifier, multiple related elements, manual selector before') { /// 10 ///
        @include output(false) {
            @include bem.block('something') {
                &:hover {
                    @include bem.elem('child1') {
                        @include bem.next-elem('child2', 'child3') {
                            @include bem.modifier('mod1') {
                                font-size: 2.5em;

                                @include bem.modifier('submod1') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }
                }

                .test & {
                    @include bem.elem('child4') {
                        @include bem.next-elem('child5', 'child6') {
                            @include bem.modifier('mod1') {
                                font-size: 2.5em;

                                @include bem.modifier('submod1') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }
                }

                @include bem.elem('child7') {
                    &:hover {
                        @include bem.next-elem('child8', 'child9') {
                            @include bem.modifier('mod2') {
                                font-size: 2.5em;

                                @include bem.modifier('submod2') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }

                    .test & {
                        @include bem.next-elem('child10', 'child11') {
                            @include bem.modifier('mod2') {
                                font-size: 2.5em;

                                @include bem.modifier('submod2') {
                                    font-size: 2.75em;
                                }
                            }
                        }
                    }
                }
            }
        }

        @include expect(false) {
            .something:hover .something__child1 + .something__child2--mod1,
            .something:hover .something__child1 + .something__child3--mod1 {
                font-size: 2.5em;
            }

            .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1,
            .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 {
                font-size: 2.75em;
            }

            .test .something__child4 + .something__child5--mod1,
            .test .something__child4 + .something__child6--mod1 {
                font-size: 2.5em;
            }

            .test .something__child4 + .something__child5--mod1.something__child5--submod1,
            .test .something__child4 + .something__child6--mod1.something__child6--submod1 {
                font-size: 2.75em;
            }

            .something__child7:hover + .something__child8--mod2,
            .something__child7:hover + .something__child9--mod2 {
                font-size: 2.5em;
            }

            .something__child7:hover + .something__child8--mod2.something__child8--submod2,
            .something__child7:hover + .something__child9--mod2.something__child9--submod2 {
                font-size: 2.75em;
            }

            .test .something__child7 + .something__child10--mod2,
            .test .something__child7 + .something__child11--mod2 {
                font-size: 2.5em;
            }

            .test .something__child7 + .something__child10--mod2.something__child10--submod2,
            .test .something__child7 + .something__child11--mod2.something__child11--submod2 {
                font-size: 2.75em;
            }
        }
    }

    // @include assert('element modifier, in at-theme') { /// 11 ///
    //     @include output(false) {
    //         @include bem.block('something') {
    //             @include bem.at-theme('dark') {
    //                 @include bem.elem('child') {
    //                     @include bem.modifier('mod') {
    //                         font-size: 2.5em;
    // 
    //                         @include bem.modifier('submod') {
    //                             font-size: 2.75em;
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    //     
    //     @include expect(false) {
    //         .t-dark .something__child--mod,
    //         [class*=' t-'] .t-dark .something__child--mod,
    //         [class^='t-'] .t-dark .something__child--mod {
    //             font-size: 2.5em;
    //         }
    // 
    //         .t-dark .something__child--mod.something__child--submod,
    //         [class*=' t-'] .t-dark .something__child--mod.something__child--submod,
    //         [class^='t-'] .t-dark .something__child--mod.something__child--submod {
    //             font-size: 2.75em;
    //         }
    //     }
    // }

    @include assert('nested block modifiers, extending') { /// 12 ///
        @include output {
            @include bem.block('something') {
                @include bem.modifier('mod') {
                    font-size: 1.5em;

                    @include bem.modifier('submod' true) {
                        font-size: 1.75em;
                    }
                }
            }
        }

        @include expect {
            .something--mod {
                font-size: 1.5em;
            }

            .something--mod--submod {
                font-size: 1.75em;
            }
        }
    }

    @include assert('nested element modifiers, extending') { /// 13 ///
        @include output {
            @include bem.block('something') {
                @include bem.elem('child') {
                    @include bem.modifier('mod') {
                        font-size: 2.5em;

                        @include bem.modifier('submod' true) {
                            font-size: 2.75em;
                        }
                    }
                }
            }
        }

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

            .something__child--mod--submod {
                font-size: 2.75em;
            }
        }
    }

    @include assert('block and element modifiers, single element') { /// 14 ///
        @include output {
            @include bem.block('something') {
                @include bem.modifier('mod1') {
                    font-size: 1.5em;

                    @include bem.modifier('submod1') {
                        font-size: 1.75em;
                    }

                    @include bem.elem('child') {
                        @include bem.modifier('mod2') {
                            font-size: 2.5em;

                            @include bem.modifier('submod2') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }
            }
        }

        @include expect {
            .something--mod1 {
                font-size: 1.5em;
            }

            .something--mod1.something--submod1 {
                font-size: 1.75em;
            }

            .something--mod1 .something__child--mod2 {
                font-size: 2.5em;
            }

            .something--mod1 .something__child--mod2.something__child--submod2 {
                font-size: 2.75em;
            }
        }
    }

    @include assert('block and element modifiers, multiple elements') { /// 15 ///
        @include output {
            @include bem.block('something') {
                @include bem.modifier('mod1') {
                    font-size: 1.5em;

                    @include bem.modifier('submod1') {
                        font-size: 1.75em;
                    }

                    @include bem.elem('child1', 'child2') {
                        @include bem.modifier('mod2') {
                            font-size: 2.5em;

                            @include bem.modifier('submod2') {
                                font-size: 2.75em;
                            }
                        }
                    }
                }
            }
        }

        @include expect {
            .something--mod1 {
                font-size: 1.5em;
            }

            .something--mod1.something--submod1 {
                font-size: 1.75em;
            }

            .something--mod1 .something__child1--mod2,
            .something--mod1 .something__child2--mod2 {
                font-size: 2.5em;
            }

            .something--mod1 .something__child1--mod2.something__child1--submod2,
            .something--mod1 .something__child2--mod2.something__child2--submod2 {
                font-size: 2.75em;
            }
        }
    }
}