@import 'variables';

@import 'milligram'; @import 'prism';

html, body {

margin: 0;
height: 100%;
max-height: 100%;
overflow: hidden;
min-width: $min-width;

}

}

pre {

margin-bottom: ($base-height * 2) !important;

}

a {

text-decoration: none;
color: inherit;

&:hover {
        color: $link-color;
        text-decoration: none;
}

}

.wrapper {

height: 100%;
width: 100%;
max-height: 100%;
min-height: 100%;
display: flex;
overflow: hidden;

}

// Sidebar .sidebar {

display: block;
width: 20%;
max-width: $sidebar-width;
padding: 0;
border-right: $sidebar-border;
height: 100%;
overflow: hidden;
color: $sidebar-color;

.sidebar-main {
        height: 100%;
        background: $navigation-background;
        padding: $base-height;
}

.sidebar-mobile {
        display: none;
        height: $header-height;
        padding: $base-height;
        text-align: right;

        .close-icon, .menu-icon {
                width: 18px;
                cursor: pointer;
                height: auto;
                display: none;
        }
}

}

.search {

height: $header-height;
border-bottom: $sidebar-border;
padding: 0 $base-height;

.search-input {
        border: none;
        font-size: 0.9em;
        font-weight: 300;
        width: 100%;
        height: 100%;
}

}

.navigation {

display: block;
width: 100%;
margin: 0;
padding: 0;
list-style: none;

li {
        margin: 0;
        padding: 10px 15px;
}

a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.active {
                color: $navigation-link-color;
        }
}

}

// Content .content {

      display: flex;
justify-content: center;
      min-height: 100%;
      height: 100%;
width: 100%;
      overflow-y: auto;
      color: $content-color;
      line-height: 1.7;
      word-wrap: break-word;

}

.inner {

width: 100%;
      max-width: $content-width;
      padding: $base-height ($base-height * 2) ($base-height * 3) $base-height;

}

.section {

margin-bottom: $base-height;

}

/**

*/ @media (max-width: $mobile-width) {

.wrapper {
        flex-direction: column;
}

.sidebar {
        width: 100%;
        max-width: 100%;
        border-right: none;
        height: $header-height;

        .sidebar-mobile {
                display: block;

                .menu-icon {
                        display: inline;
                }
        }

        &.opened {
                overflow: visible;
                height: auto;
                border-bottom: $sidebar-border;

                .sidebar-mobile {
                        background: $navigation-background;
                }
        }
}

.content {
        width: 100%;
        margin-top: 0;
        height: calc(100% - #{$header-height});
        min-height: calc(100% - #{$header-height});
}

.inner {
        padding: $base-height;
}

}