@use 'design-system' as *;

.contentViewport {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    @media (min-width: $breakpoint-docs-nav-medium) {
        flex-direction: row;
    }

    &.noLeftMenu .docPage {
        width: 100%;
    }

    @media (min-width: $breakpoint-docs-nav-large) {
        &.noLeftMenu .docPage {
            width: var(--layout-width-9-12);
            margin-left: calc(var(--layout-width-3-12) + var(--layout-gap));
        }
    }

    @media (max-width: $breakpoint-docs-nav-extra-large) {
        &.noLeftMenu .docPage {
            width: var(--layout-width-6-12);
        }
    }

    &.noLeftMenu .docPage {
        width: 100%;
    }
}

.pageSections li p {
    padding-bottom: 0;
    margin-bottom: $spacing-size-2;
}

.pageSections article {
    > h2,
    > h3,
    > h3 {
        display: flex;
        align-items: center;
        gap: $spacing-size-2;
    }

    > h2 {
        margin-top: $spacing-size-12;
    }

    > h3,
    > h4 {
        margin-top: $spacing-size-12;
    }

    > h2 + h3,
    > h2 + h4,
    > h3 + h4 {
        margin-top: $spacing-size-8;
    }

    p,
    > ul,
    > ol,
    > table {
        font-size: var(--text-fs-base);
        // Set as integer px value to fix fractional y position examples border issues
        line-height: 27px;
    }
}

h2:where(:not(:last-child)),
h3:where(:not(:last-child)),
h4:where(:not(:last-child)),
h5:where(:not(:last-child)),
h6:where(:not(:last-child)) {
    margin-top: $spacing-size-4;
    margin-bottom: $spacing-size-2;
    letter-spacing: -0.015em;
}

ul:where(:not(:last-child)),
ol:where(:not(:last-child)),
blockquote:where(:not(:last-child)) {
    margin-top: $spacing-size-5;
    margin-bottom: $spacing-size-5;
}

%enterprise-icon {
    display: inline-block;
    background-image: url(urlWithBaseUrl('/images/enterprise.svg'));
    text-indent: -10000px;
    background-position-y: center;
    background-repeat: no-repeat;
    content: 'e';
}

.docPage {
    flex: 1 1 0px;
    width: 100%;
    min-width: 0px;
    padding-top: $spacing-size-4;
    padding-bottom: $spacing-size-16;

    @media screen and (max-width: $breakpoint-docs-nav-large) {
        border: none;
    }

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        width: var(--layout-width-9-12);
        padding-top: $spacing-size-10;
        padding-right: $spacing-size-3;
    }

    @media screen and (min-width: $breakpoint-docs-nav-large) {
        width: var(--layout-width-7-12);
        max-width: var(--layout-width-7-12);
        padding-right: 0;
    }

    :global(h1),
    :global(h2),
    :global(h3),
    :global(h4),
    :global(h5),
    :global(h6) {
        :global(#{$selector-darkmode}) & {
            color: var(--color-fg-primary);
        }

        &:hover :global(.docs-header-icon) {
            opacity: 0.5;
        }
    }

    :global(.docs-header-icon) {
        position: relative;
        padding-left: 0;
        margin-left: $spacing-size-2;
        font-size: inherit;
        opacity: 0;
        transition: opacity 0.33s ease-in-out;

        &:hover {
            opacity: 1 !important;
        }

        :global(svg) {
            position: relative;
            width: 0.85em;
            height: 0.85em;
            top: -0.1em;
            visibility: visible;
            fill: var(--color-link);
        }
    }

    :global(#{$selector-darkmode}) & {
        :global(a):not(:global(.button)) {
            color: var(--color-brand-300);
        }

        :global(a):not(:global(.button)):hover {
            color: var(--color-fg-primary);
            text-decoration-color: var(--color-brand-300);
        }
    }

    enterprise-icon::after {
        @extend %enterprise-icon;

        width: 1rem;
        margin-left: 0.25rem;
    }

    :global(.nav-link) {
        p {
            margin: 0;
        }
    }

    ul li > p {
        margin-bottom: 0.25rem;
    }
}

// Align two column markdown tables
.pageSections > :global(article) > :global(table) {
    table-layout: fixed;
}

// Hack to target "intro" section of docs page
.pageSections > :global(article) > :global(p:first-child) {
    font-size: var(--text-fs-lg);
    margin-bottom: $spacing-size-8;
    color: var(--color-text-secondary);
    line-height: var(--text-lh-sm);

    :global(code) {
        font-size: 0.8em;
    }
}

// Hack to target markdown images and not images within components
.pageSections > :global(article) > :global(div) *:not([class]) :global(img) {
    max-width: 100%;
}

.sideMenu {
    padding-top: $spacing-size-8 + $spacing-size-1;
}

:global(#errorCodeText) {
    white-space: pre-wrap;
}

:global(.missing-params-message) {
    display: none;
}

.docsArchiveContainer {
    width: 100%;

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        width: calc(var(--layout-width-9-12));
        padding-top: $spacing-size-10;
    }

    @media screen and (min-width: $breakpoint-docs-nav-large) {
        width: calc(var(--layout-width-9-12) + $spacing-size-16);
    }
}
