////
/// @group components
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
/// @requires {mixin} bem-block
/// @requires {mixin} bem-elem
/// @requires {mixin} bem-mod
////
@include b(igx-bottom-nav) {
    $this: bem--selector-to-string(&);
    @include register-component(str-slice($this, 2, -1));

    @include e(panel) {
        @extend %igx-tab-panel !optional;
    }

    @include e(panel, $m: selected) {
        @extend %igx-tab-panel !optional;
        @extend %igx-tab-panel--selected !optional;
    }

    @include e(menu) {
        @extend %igx-bottom-nav-menu !optional;
    }

    @include e(menu, $m: top) {
        @extend %igx-bottom-nav-menu !optional;
        @extend %igx-bottom-nav-menu--top !optional;
    }

    @include e(menu, $m: bottom) {
        @extend %igx-bottom-nav-menu !optional;
        @extend %igx-bottom-nav-menu--bottom !optional;
    }

    @include e(menu-item) {
        @extend %igx-bottom-nav-menu-item !optional;

        .tab-icon {
            @extend %igx-tab-icon !optional;
        }

        .tab-label {
            @extend %igx-tab-label !optional;
        }
    }

    @include e(menu-item, $m: selected) {
        @extend %igx-bottom-nav-menu-item !optional;

        .tab-icon {
            @extend %igx-tab-icon !optional;
            @extend %igx-tab-icon--selected !optional;
        }

        .tab-label {
            @extend %igx-tab-label !optional;
            @extend %igx-tab-label--selected !optional;
        }
    }

    @include e(menu-item, $m: disabled) {
        @extend %igx-bottom-nav-menu-item !optional;
        @extend %igx-bottom-nav-menu-item--disabled !optional;
    }
}