﻿@import '../Styles/abstracts/_functions.scss';
@import '../Styles/abstracts/_media-queries.scss';
@import '../Styles/abstracts/_bit-css-variables.scss';

.site-content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    background-color: $bit-color-background-secondary;
}

::deep {
    .page-container {
        width: 100%;
        padding: 2rem;
        margin: 0 auto;
        max-width: rem2(1200px);

        @include md {
            padding: 1.5rem;
        }

        @include sm {
            padding: 1rem;
        }
    }

    .page-section {
        width: 100%;
        padding: rem2(28px);
        position: relative;
        box-sizing: border-box;
        border-radius: rem2(2px);
        margin-bottom: rem2(28px);
        box-shadow: $bit-box-shadow-callout;
        color: $bit-color-foreground-secondary;
        background-color: $bit-color-background-primary;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .subclass-title,
    .subenum-title,
    .subtitle,
    .title {
        overflow-wrap: anywhere;
    }

    .title {
        margin-bottom: rem2(50px);
    }

    .subtitle {
        margin-bottom: rem2(35px);
        color: $bit-color-foreground-primary;
    }

    .section-title {
        bottom: rem2(8px);
        position: absolute;
        margin-right: rem2(175px);
        color: $bit-color-foreground-primary;

        @include lt-lg {
            overflow-wrap: anywhere;
            margin-right: rem2(90px);
        }
    }

    .example-desc {
        margin-bottom: rem2(8px);
    }

    pre {
        margin: 0;
        width: 100%;
        display: flex;
        overflow: auto;
        direction: ltr;
        border-top: none;
        flex-flow: column;
        position: relative;
        min-height: rem2(70px);
        max-height: rem2(464px);
        box-sizing: border-box;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 24px 80px 24px 24px;
        border: rem2(1px) solid $bit-color-border-primary;
        font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

        &::-webkit-scrollbar {
            width: rem2(8px);
        }

        &::-webkit-scrollbar-thumb {
            border-radius: rem2(8px);
            border: rem2(4px) solid #c8c6c4;
        }

        &::-webkit-scrollbar-button {
            display: none;
        }

        &::-webkit-scrollbar-thumb:hover {
            border-radius: rem2(8px);
            border: rem2(4px) solid $bit-color-primary;
        }

        &::-webkit-scrollbar:horizontal {
            height: rem2(8);
        }
    }

    code {
        line-height: 1.5;
        font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

        span {
            font-family: inherit;
        }
    }
}
