/*
// filename: insert-sidebar-navigation-pane-style.css
//
// Copyright 2022 Tehama Inc. and its affiliates or licensors
//
// description:  This stylesheet provides styling for elements added for the sidebar-navigation-pane:
//
//               Include the stylesheet in the article_page.hbs template as follows:
//
//                     <link href="{{asset 'insert-sidebar-navigation-pane-style.css'}}" rel="stylesheet" type="text/css" />
//
*/

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* Colours:  These colours are copied from the values in the theme.                                            */

:root {
    --brand_color: rgba(12, 24, 202, 1);
    --brand_text_color: rgba(255, 255, 255, 1);
    --link_color: rgba(12, 24, 202, 1);
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS                                                                                                         */
/*                                                                                                             */


/* Provide rules to style list items in the sidebar navigation pane. */

#tehama-id-sidebar-nav-pane-unordered-list li::marker {
    color: var(--brand_color);
}

[dir="rtl"] #tehama-id-sidebar-nav-pane-unordered-list li::marker {
    float: right;
}

.tehama-class-list-item {
    color: var(--brand_color);
    outline-offset: 2px;
}

.tehama-class-list-item-h1 {
    font-weight: bold;
}

[dir='ltr'] .tehama-class-list-item-top {
    text-indent: -20px;
    margin-left: 20px;
    padding-left: 20px;
    font-weight: bold;
    list-style-type: none;
}

[dir='rtl'] .tehama-class-list-item-top {
    text-indent: -20px;
    margin-right: 20px;
    padding-right: 20px;
    font-weight: bold;
    list-style-type: none;
}

[dir='ltr'] .tehama-class-list-item-footer {
    text-indent: -20px;
    margin-left: 20px;
    padding-left: 20px;
    font-weight: bold;
    list-style-type: none;
}

[dir='rtl'] .tehama-class-list-item-footer {
    text-indent: -20px;
    margin-right: 20px;
    padding-right: 20px;
    font-weight: bold;
    list-style-type: none;
}

[dir='ltr'] .tehama-class-list-item-not-nested-chrome-and-edge {
    text-indent: -20px;
    margin-left: 20px;
    list-style-type: disc;
}

[dir='rtl'] .tehama-class-list-item-not-nested-chrome-and-edge {
    text-indent: -20px;
    margin-right: 20px;
    list-style-type: disc;
}

[dir='ltr'] .tehama-class-list-item-not-nested-safari-and-firefox {
    text-indent: -20px;
    margin-left: 5px;
    padding-left: 10px;
    list-style-type: disc;
}

[dir='rtl'] .tehama-class-list-item-not-nested-safari-and-firefox {
    text-indent: -20px;
    margin-right: 5px;
    padding-right: 10px;
    list-style-type: disc;
}

[dir='ltr'] .tehama-class-list-item-nested {
    text-indent: 0;
    margin-left: 20px;
    list-style-type: circle;
}

[dir='rtl'] .tehama-class-list-item-nested {
    text-indent: 0;
    margin-right: 35px;
    list-style-type: circle;
}

.tehama-class-list-item-invisible {
    padding-left: 20px;
    list-style-type: none;
}

.tehama-class-list-item:hover {
    background-color: #060d6a !important; /* #060d6a === darken(var(--brand_color), 20%) - darken is a Sass/Less function - which Zendesk handles, so ignore the css error. */
    font-weight: bold;
    color: var(--brand_text_color) !important;
}

.tehama-class-list-item:focus {
    background-color: #060d6a !important; /* #060d6a === darken(var(--brand_color), 20%) - darken is a Sass/Less function - which Zendesk handles, so ignore the css error. */
    font-weight: bold;
    position: relative;
    color: var(--brand_text_color) !important;
}

.tehama-class-list-item:focus::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;bottom: -2px;
    outline: 2px auto deepskyblue;
    outline: 5px auto -webkit-focus-ring-color;
}

.tehama-class-list-item-marked {
    border: 1px solid green;
}

.tehama-class-list-item-selected {
    background-color: lightgrey;
}

/* Provide rules to style the collapsible div in the sidebar navigation pane. */

.tehama-class-collapsible-sidebar-body:focus {
    outline: none;
}

[dir='rtl'] .tehama-class-collapsible-sidebar-body {
    margin-left: 15px;
    margin-right: 0;
}

[dir='ltr'] .tehama-class-collapsible-sidebar-body {
    margin-right: 15px;
    margin-left: 0;
}

.tehama-class-collapsible-sidebar-title {
    font-size: 18px;
    font-weight: 600;
    display: block;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* The toggle button we have on our collapsible sidebar using the Zendesk css class 'collapsible-sidebar-toggle'. */
/* This class has a flaw that offsets the 'in-focus' circle for elements with this class.  Fix this for our toggle button with this class. */
.tehama-class-collapsible-sidebar-toggle-fix {
    height: unset;
    top: unset;
    font-size: small;
    margin-top: 12px;
}