/** Tutorial – Code snippet **/ .tutorial{

&__snippets{
    width:100%;
    padding-top:24px;
    font-size:14px;
    line-height:22px;
    @include media-min($sm){
        padding-top:36px;
        font-size:16px;
        line-height:28px;
    }
    @include media-min($lg){
        position:sticky;
        top:126px;
        left:0;
        width:calc(50% - 24px);
        margin:0 0 0 auto;
        padding-top:0;
    }
    @include media-min($xxl){
        width:calc(60% - 24px);
    }
    &-nav{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        margin:0;
        padding:0;
        list-style-type:none;
        @include media-min($sm){
            flex-wrap:nowrap;
            overflow-x:auto;
            overflow-y:hidden;
        }
        &-item{
            width:100%;
            border-left:3px solid transparent;
            @include transition(.25s ease-in-out);
            @include media-min($sm){
                width:auto;
                border-bottom:3px solid transparent;
                border-left:0;
            }
            &--active{
                border-color:$yellow;
            }
        }
        &-link{
            display:block;
            padding:10px 12px;
            color:rgba($black,.6);
            font-weight:600;
            font-size:14px;
            line-height:22px;
            text-decoration:none;
            @include transition(.25s ease-in-out);
            @include media-min($sm){
                padding:3px 16px 12px 16px;
                white-space:nowrap;
            }
            &::before{
                display:inline-block;
                margin-right:8px;
                color:rgba($black,.18);
                vertical-align:-7px;
                content:"code";
                @include material-icons(24px);
            }
            &--notebook::before{
                content:"summarize";
            }
        }
        &-item--active &-link{
            color:rgba($black,.87);
            &::before{
                color:rgba($black,.38);
            }
        }
    }
    &-tabs{
        div.code-toolbar>.toolbar{
            display:none;
        }
        div.code-toolbar:hover>.toolbar{
            display:block;
        }
    }
    &-tab{
        display:none;
        margin:0!important;
        overflow:auto;
        outline:none;
        @include transition(background-color .5s ease-in-out);
        @include media-min($lg){
            max-height:calc(100vh - 168px - 72px);
        }
        &--active{
            display:block;
        }
        &--highlight{
            background-color: #dedede!important;
        }
    }
    &-buttons{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin:24px 0;
    }
    &-btn{
        padding:0;
        color:$yellow;
        font-weight:600;
        font-size:14px;
        background:transparent;
        border:0;
        border-radius:0;
        cursor:pointer;
        &--prev::before,
        &--next::after{
            @include material-icons(24px);
            display:inline-block;
            vertical-align: -7px;
        }
        &--prev::before{
            content:"arrow_left";
        }
        &--next::after{
            content:"arrow_right";
        }
        &--inactive{
            color:rgba($black,.38);
            cursor: not-allowed;
        }
    }
}

}

/** Dark mode styles **/ body.dark-mode .tutorial{

&__snippets{
    &-nav{
        border-bottom-color:rgba($white,.12);
        &-link{
            color:rgba($white,.6);
            &::before{
                color:rgba($white,.18);
            }
        }
        &-item--active .tutorial__snippets-nav-link{
            color:rgba($white,.87);
            &::before{
                color:rgba($white,.38);
            }
        }
    }
    &-tab--highlight{
        background-color: #444!important;
    }
    &-btn--inactive{
        color:rgba($white,.38);
    }
}

}

/** Notebook render styling **/ .nb{

&-markdown-cell{
    padding-top:12px;
    padding-bottom:1.5em;
    h1, h2, h3, h4, h5{
        font-weight:600;
        font-family:$mainFont;
    }
    h1{
        font-size:1.5em;
        @include media-min($sm){
            font-size:1.77em;
        }
    }
    h2{
        font-size:1.3125em;
        @include media-min($sm){
            font-size:1.33em;
        }
    }
    h3, h4,h5{
        font-size:1em;
    }
}
&-stdout, 
&-stderr {
    margin: 1em 0;
    white-space: pre-wrap;
}
&-cell {
    position: relative;  
    padding-left:96px;
    border-bottom:1px solid rgba($black,.12);
    &:last-of-type{
        border-bottom:0;
    }
    &--highlight{
        background: rgba($black,.09);
        background: linear-gradient(to right, rgba($black,.09) 70%, rgba($black,0));
    }
    pre[class*=language-]{
        background:transparent;
    }
}
&-cell + .nb-cell {
    margin-top: 0.5em;
}
&-input,
&-output{
    position: relative;
}
&-output:before, 
&-input:before {
    position: absolute;
    top: .75em;
    left: -96px;
    width: 96px;
    padding-right:6px;
    color: rgba($black,.38);    
    font-family: $codeFont;
    text-align: right;
}
&-input:before {
    content: "In [" attr(data-prompt-number) "]:";
}
&-output:before {
    content: "Out [" attr(data-prompt-number) "]:";
}

}

/** Dark mode **/ body.dark-mode .nb{

&-output:before, 
&-input:before {
    color:rgba($white,.38);
}
&-cell{
    border-bottom:1px solid rgba($white,.12);
    pre[class*=language-]{
        background:transparent;
    }
}
&-cell--highlight{
    background: rgba($white,.09);
    background: linear-gradient(to right, rgba($white,.09) 70%, rgba($white,0));
}

}