﻿.docs-page-content {
    min-height: calc(100vh - 600px);
}

.docs-css-api-header {
    margin-top: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--mud-palette-action-default);
    padding-left: 34px;
    margin-bottom: 2px;
}

.docs-page-content-navigation-drawer {
    .title {
        font-weight: 500;
    }

    .navigation-level {
        &-0 {
            .mud-nav-link-text {
                padding-inline-start: 0;
            }
        }

        &-1 {
            .mud-nav-link-text {
                padding-inline-start: 14px;
            }
        }
    }

    .mode-links {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        border-radius: 4px;
        font-weight: 500;
        width: 100%;
        color: var(--mud-palette-text-secondary);
        background-color: var(--mud-palette-background-gray);

        &.active {
            color: var(--mud-palette-primary);
            background-color: var(--mud-palette-primary-hover);
        }
    }
}

.docs-code {
    display: inline-block;
    padding: 0 5px;
    direction: ltr;
    font-size: 0.85em;
    font-weight: 900;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    line-height: 1.4;
    border-radius: 2px;
    -webkit-font-smoothing: subpixel-antialiased;

    &.docs-code-primary {
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-hover);
    }

    &.docs-code-secondary {
        color: var(--mud-palette-secondary);
        background-color: var(--mud-palette-secondary-hover);
    }

    &.docs-code-tertiary {
        color: var(--mud-palette-tertiary);
        background-color: var(--mud-palette-tertiary-hover);
    }

    &.docs-code-warning {
        color: var(--mud-palette-warning);
        background-color: var(--mud-palette-warning-hover);
    }
}

.docs-frame {
    width: 100%;
    position: relative;
    height: 400px;

    & .docs-frame-absolute {
        position: absolute;
        inset: 0 auto 0 0;
        width: 100%;
        height: 100%;

        & .docs-frame-inner-wrapper {
            display: flex;
            height: 100%;
            overflow: auto;
            flex-direction: column;
        }
    }
}

.text-anywhere-wrap {
    overflow-wrap: anywhere;
}
