@import 'commons';

.m-expandable-layout {
    &.m--is-panel-over-content {
        position: relative;

        &.m--has-left-panel {
            .m-expandable-layout {
                &__panel {
                    left: 0;
                }
            }
        }

        &.m--has-right-panel {
            .m-expandable-layout {
                &__panel {
                    right: 0;
                }
            }
        }

        .m-expandable-layout {
            &__main {
                z-index: 1;
            }

            &__panel {
                position: absolute;
                top: 0;
                max-height: 100%;
                overflow-y: auto;
                z-index: 2;

                @include m-scrollbar();
            }
        }
    }

    &.m--has-left-panel {
        display: grid;
        grid-template-areas: 'panel main';
        grid-template-columns: auto 1fr;
    }

    &.m--has-right-panel {
        display: grid;
        grid-template-areas: 'main panel';
        grid-template-columns: 1fr auto;
    }

    .m-expandable-layout {
        &__main {
            grid-area: main;
        }

        &__panel {
            grid-area: panel;
            overflow: hidden;
            position: relative;
            transition: width $m-transition-duration ease;
        }

        &__panel-content {
            overflow-x: hidden;
            overflow-y: auto;
            height: 100%;

            @include m-scrollbar();
        }
    }
}