@import "layout-sidebar";
$tabbable-border-color: #c5d0dc;

///
// layout
///

// page
.c-page {
    background: $page-bg;
}

// footer
.c-footer {
    //background: $footer-bg;
}

// header
.c-header {
    background: $header-bg;
    .logo {
        &.logo-text {
            > h1 {
                color: $header-logo-text-color;
            }
        }
    }
    // @TODO: Replace with proper icon that is color-able
    .sidebar-toggle-desktop, .sidebar-toggle-mobile {
        background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxyZWN0IHk9IjMiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyIiBmaWxsPSIjRkZGRkZGIi8+Cgk8cmVjdCB5PSIxNyIgd2lkdGg9IjUwIiBoZWlnaHQ9IjIiIGZpbGw9IiNGRkZGRkYiLz4KCTxyZWN0IHk9IjMxIiB3aWR0aD0iNTAiIGhlaWdodD0iMiIgZmlsbD0iI0ZGRkZGRiIvPgoJPHJlY3QgeT0iNDUiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyIiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
    }
    .nav-header {
        .nav-item > .nav-link {
            color: $header-item-link-color;
            background: $header-item-bg-color; //lighten($header-bg-color, 20);

            &.nav-link-split {
                .nav-link-top {
                    color: $header-item-split-top-color;
                    background: $header-item-split-top-bg-color;
                }
            }

        }

    }
}

// content

.c-content {
    background: $sidebar-bg; // is strange but this is correct
    .document {
        background: $content-bg;
    }
    .breadcrumb {
        border-bottom-color: $sidebar-bg-color;
    }
}

///
// Components
///

// carousel

.carousel.carousel-codex {
    .carousel-item {
        background-color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat;
        background-position: center center;
    }

    .carousel-control {
        &.bottom {
            color: rgba(white, 0.6);
            &:hover {
                color: rgba(white, 0.9);
            }
        }

    }
}

// code


// document
.page-document {
    .document {
        blockquote {
            background: material-color('grey', '200');
        }
    }
}

//loader
body.page-loading {
    @include createLoader(page, $codex-loader-color, $codex-loader-size, $codex-loader-margin, $codex-loader-speed);
}


// navs
.tabbable {
    .tab-content {
        border-color: #D5D5D5;
        background: white;
    }
    .nav-tabs {
        border-color: $tabbable-border-color;
    }

    .nav-tabs .nav-link,
    .nav-tabs .nav-link:focus {
        border-color: $tabbable-border-color;
        background-color: #f9f9f9;
        color: #999999;
    }

    .nav-tabs .nav-link:hover {
        background-color: #ffffff;
        color: #4c8fbd;
        border-color: $tabbable-border-color
    }


    .nav-tabs > .nav-item:first-child > a {
        margin-left: 0
    }

    .nav-tabs > .nav-item > a.active,
    .nav-tabs > .nav-item > .nav-link.active:hover,
    .nav-tabs > .nav-item > .nav-link.active:focus {
        color: #576373;
        border-color: $tabbable-border-color;
        border-top-color: #4c8fbd;
        border-bottom-color: transparent;
        background-color: #ffffff;
        box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, .15)
    }
    &.tabs-below > .nav-tabs {
        border-color: $tabbable-border-color;
    }

    &.tabs-below > .nav-tabs .nav-link,
    &.tabs-below > .nav-tabs .nav-link:hover,
    &.tabs-below > .nav-tabs .nav-link:focus {
        border-color: $tabbable-border-color
    }

    &.tabs-below > .nav-tabs > .nav-item > a.active,
    &.tabs-below > .nav-tabs > .nav-item > .nav-link.active:hover,
    &.tabs-below > .nav-tabs > .nav-item > .nav-link.active:focus {
        border-color: $tabbable-border-color;
        border-bottom-color: #4c8fbd;
        border-top-color: transparent;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .15)
    }

    &.tabs-left > .slimScrollDiv > .nav-tabs,
    &.tabs-left > .nav-tabs {
        border-color: $tabbable-border-color;
    }

    &.tabs-left > .slimScrollDiv > .nav-tabs .nav-link,
    &.tabs-left > .slimScrollDiv > .nav-tabs .nav-link:focus,
    &.tabs-left > .slimScrollDiv > .nav-tabs .nav-link:hover,
    &.tabs-left > .nav-tabs .nav-link,
    &.tabs-left > .nav-tabs .nav-link:focus,
    &.tabs-left > .nav-tabs .nav-link:hover {
        border-color: $tabbable-border-color;
    }

    &.tabs-left > .slimScrollDiv > .nav-tabs  > .nav-item > a.active,
    &.tabs-left > .slimScrollDiv > .nav-tabs  > .nav-item > .nav-link.active:focus,
    &.tabs-left > .slimScrollDiv > .nav-tabs  > .nav-item > .nav-link.active:hover,
    &.tabs-left > .nav-tabs > .nav-item > a.active,
    &.tabs-left > .nav-tabs > .nav-item > .nav-link.active:focus,
    &.tabs-left > .nav-tabs > .nav-item > .nav-link.active:hover {
        border-color: $tabbable-border-color;
        border-left-color: #4c8fbd;
        border-right-color: transparent;
        -webkit-box-shadow: -2px 0 3px 0 rgba(0, 0, 0, .15) !important;
        box-shadow: -2px 0 3px 0 rgba(0, 0, 0, .15) !important
    }

    &.tabs-right > .nav-tabs {
        border-color: $tabbable-border-color;
    }

    &.tabs-right > .nav-tabs .nav-link,
    &.tabs-right > .nav-tabs .nav-link:focus,
    &.tabs-right > .nav-tabs .nav-link:hover {
        border-color: $tabbable-border-color;
    }

    &.tabs-right > .nav-tabs > .nav-item > a.active,
    &.tabs-right > .nav-tabs > .nav-item > .nav-link.active:focus,
    &.tabs-right > .nav-tabs > .nav-item > .nav-link.active:hover {
        border-color: $tabbable-border-color;
        border-right-color: #4c8fbd;
        border-left-color: transparent;
        margin: 0 -2px 0 -1px;
        -webkit-box-shadow: 2px 0 3px 0 rgba(0, 0, 0, .15);
        box-shadow: 2px 0 3px 0 rgba(0, 0, 0, .15)
    }

    .nav-tabs > .nav-item.open .dropdown-toggle {
        background-color: #4f99c6;
        border-color: #4f99c6;
        color: #ffffff
    }

    .nav-tabs > .nav-item.open .dropdown-toggle > .tab-icon {
        color: #ffffff !important
    }
    .nav-pills .open .dropdown-toggle,
    .nav > .nav-item.dropdown.open.active > .nav-link:hover,
    .nav > .nav-item.dropdown.open.active > .nav-link:focus {
        background-color: #4f99c6;
        border-color: #4f99c6;
        color: #ffffff
    }

    .nav-pills .open .dropdown-toggle > .tab-icon,
    .nav > .nav-item.dropdown.open.active > .nav-link:hover > .tab-icon,
    .nav > .nav-item.dropdown.open.active > .nav-link:focus > .tab-icon {
        color: #ffffff !important
    }

    .nav-tabs > .nav-item:not(.active):not(.open) > .nav-link:not(:hover) > .tab-icon:first-child.disabled {
        color: #909090 !important
    }
}



.scroll-to-top {
    color: #cfd8dc !important;
}


.side-nav {
    a {
        &.active {
            background-color: material-color(blue-grey, '800');
        }
    }
    .fa {
        color: $color-codex;
        &.fa-github { color: black }
        &.fa-bitbucket { color: #205081; }
        &.fa-google { color: #4285f4; }
    }

    a:not([href]):not([tabindex]).subheader {
        color: rgba(0, 0, 0, 0.54)
    }

}