@import '../mixins.scss';

.demo-container {
    min-height: calc(100vh - 1px);
    padding: 50px;
}

.demo-header {
    margin-bottom: 20px;
    font-size: var(--g-text-body-1-font-size);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--g-color-text-primary);
}

.demo-description {
    margin-bottom: 25px;
    font-size: var(--g-text-body-2-font-size);
    line-height: var(--g-text-body-2-line-height);
}

.demo-markdown {
    .markdown-body {
        padding: 20px;
        color: var(--g-color-text-primary);

        a {
            color: var(--g-color-text-link);
        }
    }
}

.pc-page-constructor {
    --pc-first-block-mobile-indent: 32px;
    --pc-first-block-indent: 64px;
    margin-bottom: 120px;
}

.pc-layout {
    @include add-specificity(&) {
        min-height: auto;
    }
}

.g-root:not(.g-root_mobile) {
    scrollbar-width: var(--g-scrollbar-width);
    scrollbar-color: var(--g-color-scroll-handle) var(--g-color-scroll-track);

    @include scrollbar;
}