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

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

//
// Included test cases:
//  - /// 1 /// - Media object
//  - /// 2 /// - Tabs
/// - /// 3 /// - Accordion
//

@include it('Examples') {
    @include assert('Media object') { /// 1 ///
        @include output {
            @include bem.object('media') {
                display:         flex;
                align-items:     flex-start;
                justify-content: flex-start;

                @include bem.elem('image') {
                    display:  block;
                    flex:     0 0 auto;
                    order:    1;
                    overflow: hidden;
                }

                @include bem.elem('body') {
                    order: 2;
                }

                @include bem.modifier('rtl') {
                    justify-content: flex-end;

                    @include bem.elem('image') {
                        order: 2;
                    }

                    @include bem.elem('body') {
                        order: 1;
                    }
                }
            }
        }

        @include expect {
            .o-media {
                display:         flex;
                align-items:     flex-start;
                justify-content: flex-start;
            }

            .o-media__image {
                display:  block;
                flex:     0 0 auto;
                order:    1;
                overflow: hidden;
            }

            .o-media__body {
                order: 2;
            }

            .o-media--rtl {
                justify-content: flex-end;

                .o-media__image {
                    order: 2;
                }

                .o-media__body {
                    order: 1;
                }
            }
        }
    }

    @include assert('Tabs') { /// 2 ///
        @include output {
            @include bem.component('tabs') {
                position: relative;

                @include bem.elem('tab') {
                    float: left;
                }

                @include bem.elem('tabRadio') {
                    position: absolute;
                    top:      -9999px;
                    left:     -9999px;

                    &:checked {
                        @include bem.sibling-elem('tabLabel') {
                            font-weight: bold;
                        }

                        @include bem.sibling-elem('tabContent') {
                            display: block;
                        }
                    }
                }

                @include bem.elem('tabLabel') {
                    cursor: pointer;

                    &:hover,
                    &:active {
                        text-decoration: underline;
                    }
                }

                @include bem.elem('tabContent') {
                    position: absolute;
                    left:     0;
                    display:  none;
                }
            }
        }

        @include expect {
            .c-tabs {
                position: relative;
            }

            .c-tabs__tab {
                float: left;
            }

            .c-tabs__tabRadio {
                position: absolute;
                top:      -9999px;
                left:     -9999px;
            }

            .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel {
                font-weight: bold;
            }

            .c-tabs__tabRadio:checked ~ .c-tabs__tabContent {
                display: block;
            }

            .c-tabs__tabLabel {
                cursor: pointer;
            }

            .c-tabs__tabLabel:hover,
            .c-tabs__tabLabel:active {
                text-decoration: underline;
            }

            .c-tabs__tabContent {
                position: absolute;
                left:     0;
                display:  none;
            }
        }
    }

    @include assert('Accordion') { /// 3 ///
        @include output {
            @include bem.component('accordion') {
                @include bem.elem('section') {
                    // nothing to do
                }

                @include bem.elem('sectionCheckbox') {
                    position: absolute;
                    top:      -9999px;
                    left:     -9999px;

                    &:checked {
                        @include bem.sibling-elem('sectionLabel') {
                            font-weight: bold;
                        }

                        @include bem.sibling-elem('sectionContent') {
                            display: block;
                        }
                    }
                }

                @include bem.elem('sectionLabel') {
                    cursor: pointer;

                    &:hover,
                    &:active {
                        text-decoration: underline;
                    }
                }

                @include bem.elem('sectionContent') {
                    display: none;
                }
            }
        }

        @include expect {
            .c-accordion__sectionCheckbox {
                position: absolute;
                top:      -9999px;
                left:     -9999px;
            }

            .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel {
                font-weight: bold;
            }

            .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent {
                display: block;
            }

            .c-accordion__sectionLabel {
                cursor: pointer;
            }

            .c-accordion__sectionLabel:hover,
            .c-accordion__sectionLabel:active {
                text-decoration: underline;
            }

            .c-accordion__sectionContent {
                display:  none;
            }
        }
    }
}