@import '../../../styles/variables';
@import '../../../styles/mixins';

.dc-doc-layout {
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: 100%;
    background: var(--yc-color-base-background);

    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
        align-items: normal;
    }

    &__left,
    &__right {
        flex: 0 0 auto;
        box-sizing: content-box;
    }

    &__right {
        width: 176px;
        padding-right: 24px;
        &_full-screen,
        &_hidden-right {
            flex: initial;
        }
    }

    &__left {
        width: 276px;

        &_full-screen {
            flex: initial;
        }
    }

    &__center {
        flex: 1 1 auto;
        position: relative;
        min-width: 0;

        &#{&}_hidden-right#{&}_regular-page-width:not(#{&}_full-screen) {
            max-width: calc(736px + 176px / 2);
        }

        &_full-screen {
            flex: 0 0 auto;
            width: 100%;
        }

        &_loading {
            height: calc(100vh - var(--dc-header-height, #{$headerHeight}));
            overflow: hidden;
        }
    }

    &__toc {
        position: fixed;
        z-index: 100;
        top: var(--dc-header-height, #{$headerHeight});
        padding-left: 24px;
        width: 252px;
        background-color: var(--yc-color-base-background);
        @include text-size(body-1);
    }

    &__desktop-only {
        .mobile & {
            display: none;
        }
    }

    &__mobile-only {
        .desktop & {
            display: none;
        }
    }

    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
        flex-direction: column-reverse;

        &__right {
            display: none;
        }

        &__left {
            width: auto;
        }

        &__toc {
            position: static;
            width: auto;
            height: auto;

            .dc-toc {
                /* stylelint-disable-next-line declaration-no-important */
                height: 100% !important;
            }
        }
    }

    @media screen and (min-width: 1280px) {
        &__center &#{&}_hidden-right#{&}_regular-page-width:not(#{&}_full-screen) {
            max-width: calc(736px + 200px / 2);
        }

        &__right {
            width: 200px;
        }

        &__toc {
            width: 252px;
        }

        &__left {
            width: 276px;
        }
    }
}