@import "../common/example";
@import "../common/md";
@import "../../src/theme/scrollnav";
#scrollnav-example{
    height:100%;
}
.scrollnav-example{
    px2px("font-size",14)
    background: #FFF;
    font-size:px2rem(16);
    position:relative;
    height:100%;
    &>header{
        position:absolute;
        width:100%;
        z-index:100;
    }
    .scrollnav-example-inner{
        height:100%;
    }
    .scrollnav-example-list{
        box-sizing: border-box;
        padding-right:px2rem(30);
        padding-bottom:px2rem(40);
        padding-top:px2rem(41);
        h4 {
            line-height:px2rem(40);
            padding: 0 0 0 px2rem(15);
        }
        h5 {
            background: $list-background;
            line-height: px2rem(25);
            padding: 0 0 0 px2rem(15);
        }
        ul {
            width: 100%;
            font-size: px2rem(15);
            line-height: px2rem(35);
            li {
                padding: 0 0 0 px2rem(15);
                border-bottom: $list-border;
                &:last-child {
                    border-bottom: 0 none;
                }
                color: $font-gray;
                &.active {
                    color: $pink-color;
                    display: flex;
                    &>span {
                        flex: none;
                        width: px2rem(60);
                        font-weight: 400;
                        font-size: px2rem(12);
                    }
                    &>b {
                        font-weight: 400;
                        flex: 1;
                    }
                }
            }
        }
    }
}