@import 'variables';

$docs-nav-width: 256px;

._docs-nav {
    position: -webkit-sticky;
    position: sticky;
    right: 0;
    top: 69px;
    background-color: white;
    //border-left: 1px solid #e1e1e1;
    width: $docs-nav-width;
    height: calc(100vh - 69px);
    font-size: $font-small;
    color: rgba(0, 0, 0, 0.7);
    & ._items {
        border-left: solid 4px $aspirin_orange;
        margin-top: 64px;
        margin-left: 16px;
        & a {
            display: block;
            padding: 4px 8px;
            color: rgba(0, 0, 0, 0.7);
            cursor: pointer;
            outline: none;
            &:hover:not(._disabled) {
                color: $link-color;
            }
            &._disabled {
                color: rgba(0, 0, 0, 0.34);
            }

        }
        & ._nav-header {
            padding: 4px 8px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.54);
        }
    }
}

._main-docs {
    width: calc(100% - 256px);
    min-height: calc(100vh - 55px);
    background-color: white;
    color: rgba(0, 0, 0, 0.87);
    & ._divider {
        margin-top: 32px;
    }
    & h1, h2 {
        font-weight: 300;
        padding: 0;
        margin: 20px 0 0;
    }
    & h1 {
        color: rgba(0, 0, 0, 0.54);
    }
    & ._snippet, code {
        font-family: $font-family-mono;
        background-color: #f5f5f5;
        border-radius: 4px;
        padding: 8px;
        margin-top: 16px;
        margin-bottom: 16px;
        span {
            color: $text-green;
        }
    }
    & table {
        text-align: left;
        border-collapse: collapse;
        width: 100%;
        & thead {
            background-color: $color-grey-500;
            height: 36px;
            padding: 8px;
            color: white;
            & th {
                font-weight: 400;
                padding-left: 8px;
                padding-right: 8px;
            }
        }
        td {
            font-weight: 400;
            padding-left: 8px;
            padding-right: 8px;
        }
        tr {
            height: 32px;
            border-bottom: solid 1px rgba(0, 0, 0, 0.05);
        }
    }
}
