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

    @extend %animation !optional;

    // Main aside element
    @include e(aside) {
        @extend %aside !optional;

        &.panning {
            @extend %aside-panning !optional;
        }
    }

    @include e(aside, collapsed) {
        @extend %aside--collapsed !optional;

        &.igx-nav-drawer__aside--right {
            @extend %aside--collapsed--right !optional;
        }
    }


    @include e(aside, right) {
        @extend %aside--right !optional;
    }

    @include e(aside, mini) {
        @extend %aside--mini !optional;
    }

    @include e(aside, normal) {
        @extend %aside--normal !optional;
    }

    @include e(aside, pinned) {
        @extend %aside--pinned !optional;

        &.igx-nav-drawer__aside--collapsed {
            @extend %igx-nav-drawer__aside--collapsed !optional;
        }
    }

    // Overlay
    @include e(overlay) {
        @extend %overlay !optional;

        &.panning {
            @extend %overlay-panning !optional;

            &.igx-nav-drawer__overlay--hidden {
                @extend %overlay-panning--hidden !optional;
            }
        }
    }

    @include e(overlay, hidden) {
        @extend %overlay--hidden !optional;
    }

    // Style Dummy(hidden) used for measures
    @include e(style-dummy) {
        @extend %style-dummy !optional;
    }

    // igxDrawerItem Items
    @include e(item) {
        @extend %item !optional;
    }

    @include e(item, active) {
        @extend %item !optional;
        @extend %item--active !optional;
    }

    @include e(item, header) {
        @extend %item--header !optional;
    }
}