$border: 1px solid grey


.page
    +absolute(0, '','', 0)
    display: flex
    width: 100%
    height: 100%
    user-select: none
    
.sidebar
    +font(20px, 30px)
    padding: $gutter_lg
    border-right: $border
    flex-shrink: 0

    & > div
        cursor: pointer

        &:hover
            font-weight: 600

.active
    font-weight: 600

.demo_component
    padding: 0 $gutter_lg $gutter_lg
    width: 100%
    height: 100%
    overflow: auto
    
    h2
        +font(22px, '','', 500)
        padding: $gutter 0

        &:not(:first-of-type)
            border-top: $border
            padding-top: $gutter_lg
            margin-top: $gutter_lg
    
    h3
        +font(16px, '','', 400)
        padding-bottom: $gutter_sm


.component_title
    +font(34px, '','', 600)
    position: sticky
    top: 0
    border-bottom: $border
    background: $white
    margin: 0 -#{$gutter_lg}
    padding: $gutter_lg $gutter_lg $gutter_lg
    z-index: 2

    a
        vertical-align: middle

        i
            font-size: 32px