@import '_home_svg.scss';

.btn-lg, .btn-group-lg > .btn {
    border-radius: 6px;
}


._td-navbar {
    background-color: $dark-teal;
}
._td-sidebar {
    background-color: $tan;
}
._td-sidebar-nav .td-sidebar-link.tree-root {
    color: $tan-link;
}
.td-main, .td-section, .td-page {
    .td-sidebar {
        border-right: 2px solid $tan;
    }
    .td-sidebar-nav .td-sidebar-link.tree-root {
        border-color: $dark-teal;
    }
    .td-sidebar-nav__section-title a {
        color: $dark;
    }
    .td-sidebar-nav a:hover { color: $dark-teal; }
}
.navbar-brand .font-weight-bold { font-weight: 600 !important; }
.td-home, .td-main, .td-section, .td-page {
    .td-navbar { 
        background: linear-gradient($dark 0%, $dark-blue 10%, $dark-blue 100%);
        //border-bottom: 1px dotted $light-blue;  
    }
}

$link-color: $light-link;
.td-home, .td-main, .td-section, .td-page {
    footer.bg-dark {
        background-color: $dark-teal !important;
    }
} 

.td-box--dark-blue {
    background-color: $dark-blue;
    color: $light;
    a {
        color: $dark-blue-link;
    }
}
.td-box--light-teal {
    background-color: $light-teal;
    color: $light-teal-link;
    a {
        color: $light-teal-link;
    }
}
.td-box--tan {
    background-color: $tan;
    color: $tan-text;
    a {
        color: $tan-link;
    }
}
.td-box--dark-orange {
    background-color: $dark-orange;
    color: $dark-orange-text;
    a {
        color: $dark-orange-link;
    }
}
.td-box--light-blue {
    background-color: $light-blue;
    color: $light-blue-text;
    a {
        color: $light-blue-link;
    }
}


.td-main .br-import {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    @include media-breakpoint-up(md) { 
        padding-top: 5.5rem; 
    }
    &.td-content {
        pre,
        .highlight,
        .lead,
        h1,
        h2,
        ul,
        ol,
        p,
        blockquote,
        dl dd,
        .footnotes,
        .alert {
            max-width: inherit;
        }
    }
}

.featured-figure {
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    &.docs-figure {
        margin-left: 0;
        margin-right: 0;
    }
}
/* component diagram syles */
@mixin svg-disabled-container {
    fill: none;
    stroke: #fff;
    stroke-dasharray:0.916384, 0.916384;
}
#svg_admin { @include svg-disabled-container; }

@mixin svg-disabled-container-label {
    fill-opacity: 0.50;
}

#svg_admin_label tspan { @include svg-disabled-container-label; }

@mixin svg-disabled-component { fill-opacity: 0.25; }
.disabled-diagram-component-systemd { #svg_systemd { @include svg-disabled-component; } }
.disabled-diagram-component-kernel { #svg_kernel { @include svg-disabled-component; } }
.disabled-diagram-component-containerd-left { #svg_containerd_left  { @include svg-disabled-component; } }
.disabled-diagram-component-containerd-right { #svg_containerd_right { @include svg-disabled-component; } }
.disabled-diagram-component-kubelet { #svg_kubelet  { @include svg-disabled-component; } }
.disabled-diagram-component-control-container { 
    #svg_control  { @include svg-disabled-component; @include svg-disabled-container; } 
    #svg_control_label tspan { @include svg-disabled-container-label; }
}
.disabled-diagram-component-pods { 
    #svg_pods_label, #svg_pods { @include svg-disabled-component; } 
}

.show_ecs {
    .ecs {
        display: inherit;
    }
    #svg_pods_label,
    #svg_pods {
        display: none;
    }
}
.ecs {
    display: none;
}
.containers {
   fill:#ff9636;
}
.host-containers {
   fill: #ffffff;
   fill-opacity: 0.25;
}
.container-labels {
    font-size:14.1111px;
    text-align:center;
    text-anchor:middle;
    fill:#000000;
    tspan {
        font-size:14.1111px;
        fill:#000000;
        stroke-width:1.556;
    }
}

.containers {
    &.user-containers {
        fill: $dark-orange;
    }
    &.containerd {
        fill: $light-orange;
    }
}
#svg_kubelet {
   fill: $dark-teal;
}
#svg_systemd {
   fill: $light-blue;
}
#svg_kernel {
   fill: $dark-blue;
}


#svg_ecs_agent {
   fill: $light-teal;
}
#svg_ecs_agent_label tspan,
#svg_containerd_left_label tspan,
#svg_containerd_right_label tspan,
#svg_kubelet_label tspan,
#svg_systemd_label tspan,
#svg_kernel_label tspan {
   fill: $light;
}
    
.disabled-diagram-component-host-containers { 
    #svg_control_label,
    #svg_admin_label tspan,
    #svg_host_container_label, 
    #svg_host_container { @include svg-disabled-component; } 
}

.diagram-eks-a {
    #svg_control_label tspan { @include svg-disabled-container-label; }
    #svg_admin_label tspan { fill-opacity: 1; }
    #svg_admin { fill: $light; opacity: 1; stroke: none }
    #svg_control { @include svg-disabled-container; }
}

.td-sidebar-nav .td-sidebar-link__page {
    font-family: $td-fonts-serif
}

.td-sidebar-nav__section-title,
header,
.h1,.h2,.h3,.h4,.h5,.h6,
h1,h2,h3,h4,h5,h6 {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
}

.td-box--dark-blue {
    a.btn {
        background-color: transparent;
        color: $light;
        border: 2px solid $light;
        font-weight: 300 !important;
        font-family: 'IBM Plex Sans Condensed', sans-serif;
    }
}

/* this is used to replace the existing section index on section listing pages. Only the explicit one will be shown. */
.suppress_section_listing .section-index {
    display: none;
    &.subsection-list {
        display: inherit;
    }
}
@include media-breakpoint-down(md) {
    .td-sidebar-nav__section .ul-1 ul {
        padding-left: 0.5rem;
    }
}

/* swagger ui pages show some confusing references, we can hide them with CSS */
.swagger-ui {
    pre.errors-wrapper,
    hgroup.main a {
        display: none;
    }
    pre {
        background-color: transparent;
    }
}

@include media-breakpoint-down(md) {
    .td-content .highlight {
        max-width:unset;
    }
}

/* make nav even along left */
nav.foldable-nav .ul-1 > li {
    margin-left: -1.5rem;
}

/* fix "Documentation in English" issue, remove once we do i18n */
.dropdown-toggle {
    display: none;
}

nav.foldable-nav .with-child, nav.foldable-nav .without-child {
    padding-left: 1.25em;
    
}

/* style bottom links */
footer .text-links {
    a span {
        color: white;
        text-decoration:  underline;
    }

    a:not(:first-child)::before {
        color: $light-teal-link;
        content: " / ";
    }
}

/* old docs notice */
.pageinfo.olddocs {
    margin-left: 0;
    padding-bottom: 1.5rem;
}