// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
/**
 * Snap user swatch.
 *
 * @package   theme_snap
 * @copyright Copyright (c) 2018 Blackboard Inc. (http://www.blackboard.com)
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

// Everything affected by brand-color choice to allow per category customisation.
// Wrap in a .theme-snap class so that it can be replaced with .category-x later.

$darker-grey-btn: #999999;
$dark-grey-btn: #adadad;
$light-grey-btn: #cccccc;
$lighter-grey-btn: #e6e6e6;

.theme-snap {
    div.moodle-dialogue.filepicker a.nav-link.active {
        color: #fff;
        background-color: $brand-primary;
        &:hover {
            background-color: darken($brand-primary, 8%);
            color: #fff;
        }
    }
    a:not(.btn):not(.dropdown-item):not(._blanktarget):not(.snap-due-date):not(.yui3-button):not(.mast-breadcrumb):not(.active):not(.disabled),
    .btn-link,
    .fake-link {
        color: $brand-primary;

        &:focus,
        &:hover {
            color: darken($brand-primary, 8%);
        }
    }

    #snap-pm-courses .nav-tabs a.nav-link.active {
        color: darken($brand-primary, 8%);
    }

    .nav-pills a.nav-link.active {
        background: $brand-primary;
        color: #fff !important;
    }

    .snap-dropzone-label:hover .fake-link {
        color: darken($brand-primary, 8%);
    }

    // Focus outline for keyboard tab users
    a,
    .dropdown-toggle {
        &:focus {
            outline: 3px solid $brand-primary;
        }
        &:active,
        &:hover {
            outline: 0;
        }
    }

    .js-snap-asset-move:focus + label .svg-icon {
        outline: 3px auto $brand-primary;
    }

    .iconhelp {
        &:focus > img,
        & > img:hover {
            background-color: $brand-primary;
        }
    }

    #snap-collapse-help {
        border-left: .25em solid $brand-primary;
    }

    // General toggle icons.
    button.snap-icon-toggle {
        &,
        &:hover,
        &:link,
        &:active,
        &:focus {
            color: $brand-primary;
        }
        &:focus {
            border: 2px solid $brand-primary;
        }
    }

    #admin-menu-trigger {
        &:hover,
        &:focus {
            outline: 0;
            border-color: $brand-primary;
        }
    }

    .blockquote {
        border-left-color: $brand-primary;
    }

    .blockquote-reverse {
        border-right-color: $brand-primary;
    }

    .section li.snap-native .activityinstance .snap-asset-link a {
        color: $brand-primary;

        &:focus,
        &:hover {
            color: darken($brand-primary, 8%);
        }
    }
    .snap-asset-link a {
        &:focus,
        &:hover {
            color: darken($brand-primary, 8%);
        }
    }

    hr {
        background-color: $brand-primary;
    }

    // Calendar
    #dateselector-calendar-panel {
        .yui3-calendar-day {
            color: $brand-primary;
        }

        .yui3-calendar-day:hover {
            color: darken($brand-primary, 8%);
        }

        .yui3-calendar-day-selected,
        .yui3-calendar-day:hover {
            color: #fff;
            background-color: $brand-primary;
        }
    }

    // Pills
    // -------------------------

    .nav-pills {
        > li {

            // Links rendered as pills
            // Active state

            &.active > a {
                &,
                &:hover,
                &:focus {
                    background-color: $brand-primary;
                }
            }
        }
    }

    // Elements
    // -------------------------

    #snap-pm-header {
        background-color: $brand-primary;
        .userpicture {
            box-shadow: 0 0 5em lighten($brand-primary, 8%);
        }
    }

    .courseinfo-teachers-more {
        &:hover {
            border-color: $brand-primary;
        }
    }

    .snap-progress-circle {
        .progressbar-text {
            a,
            a:visited {
                color: $brand-primary;
            }
            a:focus,
            a:hover {
                color: darken($brand-primary, 8%);
            }
        }
    }

    .snap-unread-marker {
        color: $brand-primary;
    }

    .button-group > button.default,
    .btn.btn-primary {
        color: #fff;
        background-color: $brand-primary;
        border-color: $brand-primary;
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: darken($brand-primary, 10%);
            border-color: darken($brand-primary, 10%);
            outline: 3px auto $brand-primary;
        }
    }

    .btn.btn-default,
    .btn.btn-secondary,
    .btn.btn-outline-primary,
    .btn.btn-outline-secondary,
    .button-group > button,
    input.form-submit,
    .atto_form button,
    .gradingform_checklist.editor .addgroup input,
    .gradingform_checklist.editor .additem input,
    .gradingform_rubric.editor .addlevel input,
    .gradingform_rubric.editor .addcriterion input,
    .paging.paging-morelink a,
    a.yui3-button,
    .yui-button button,
    .header-button-group .btn,
    &#page-site-index .section-modchooser-link .section-modchooser-text {

        // Imitate btn.btn-secondary CSS for buttons without proper
        // Bootstrap classes applied to them, and override colors for
        // btn-secondary, btn-default.
        color: $brand-primary;
        border-color: $brand-primary;
        background-color: transparent;

        &:hover:not(:disabled),
        &:focus:not(:disabled),
        &:active:not(:disabled),
        &.active:not(:disabled) {
            background-color: $brand-primary;
            border-color: $brand-primary;
            color: #fff;
            outline: 3px auto $brand-primary;
        }

    }

    .btn.btn-secondary {
        .icon {
            color: $brand-primary;
        }

        &:hover:not(:disabled),
        &:focus:not(:disabled),
        &:active:not(:disabled),
        &.active:not(:disabled),
        &.checked {
            .icon {
                color: #fff;
            }
        }
    }

    #id_cancel {
        color: $brand-primary;

        &:hover,
        &:focus,
        &:active,
        &.active {
            text-decoration: underline;
            color: darken($brand-primary, 8%);
            background-color: #fff;
        }
    }

    #show-toc {
        color: $brand-primary;
    }

    &#page-site-index #page-header,
    &#page-login-index #page,
    .news-article-image,
    .news-article-preview,
    #snap-footer-alert,
    #toc-mobile-menu-toggle {
        background-color: $brand-primary;
    }

    #snap-pm-mobilemenu {
        a {
            &.state-active {
                .svg-icon {
                    border: 2px solid $brand-primary;
                }
            }
        }
    }

    .coursecard {
        background-color: $brand-primary;
    }

    .video-js {
        .vjs-big-play-button {
            background-color: rgba($brand-primary, .7);

            &:focus {
                background-color: $brand-primary;
            }
        }

        &:hover {
            .vjs-big-play-button {
                background-color: $brand-primary;
            }
        }
    }

    #notice,
    #toc-search:before {
        color: $brand-primary;
    }

    #toc-search-input {

        &:hover {
            border-color: $brand-primary;
        }
        &:focus {
            border-bottom: 1px solid $brand-primary;
            outline: 3px auto $brand-primary;
        }
    }

    // workaround for #notices with buttons outside the div#notice
    &#page-course-loginas,
    &#page-mod-survey-save {
        #region-main {
            background-color: $brand-primary;
        }
    }

    /* highlight selected menu item logic */
    /* default */
    a[href="#sections"] {
        border-bottom: 0.3em solid $brand-primary;
    }

    /* moodle edit menus */
    .moodle-actionmenu[data-enhanced].show .menu a:hover,
    .moodle-actionmenu[data-enhanced].show .menu a:focus {
        color: $brand-primary;
        background-color: transparent;
    }

    // Catch all for mods we do not have colours for.
    li.snap-resource,
    li.snap-activity {
        border-top-color: $brand-primary;
    }

    // yui-bs overrides
    &.yui-skin-sam,
    &.yui-bootstrapped {

        .yui-calcontainer {
            .yui-calendar {
                td.calcell {
                    a {
                        color: $brand-primary;
                    }

                    &.selected {
                        background-color: $brand-primary;
                    }

                    &.calcellhover,
                    &.calcellhover a {
                        background: $brand-primary;
                    }
                }
            }
        }

        .yui-dt-paginator {
            a {
                &.yui-pg-previous,
                &.yui-pg-first,
                &.yui-pg-next,
                &.yui-pg-last,
                &.yui-pg-page {
                    color: $brand-primary;

                    &:hover,
                    &:focus {
                        color: darken($brand-primary, 8%);
                    }
                }
            }

            span.yui-pg-current-page {
                &,
                &:hover,
                &:focus {
                    color: #fff;
                    background-color: $brand-primary;
                    border-color: $brand-primary;
                }
            }
        }
    }

    &.path-blocks-reports {

        .yui3-widget-stdmod {

            div.report-nav-item-left,
            div.report-nav-item-right {

                a.nav-paginate {

                    &:hover,
                    &:focus {
                        background-color: $brand-primary;
                    }
                }
            }
        }
    }

    // Use & since these need to connect to body tag when used in categories
    // where all this code is wrapped in body.category-X {};
    &.yui-bootstrapped,
    &.yui-skin-sam {
        .yui3-tabview-list {
            .yui3-tab-label {
                color: $brand-primary;

                &:hover,
                &:focus {
                    color: darken($brand-primary, 8%);
                }
            }
        }

        .yui-navset {
            .yui-nav {
                li > a {
                    color: $brand-primary;

                    &:hover,
                    &:focus {
                        color: darken($brand-primary, 8%);
                    }
                }
            }
        }
    }

    .progress .bar,
    .progress-bar:not(.progress-bar-info):not(.progress-bar-success):not(.progress-bar-warning):not(.progress-bar-danger) {
        background-color: $brand-primary;
    }

    .dropdown-menu > li > a {
        display: block;
        &:hover,
        &:focus {
            background-color: $brand-primary;
            color: white;
        }
    }

    // AJAX spinner.
    .spinner-three-quarters:not(:required).spinner-dark {
        border-color: $brand-primary;
        border-right-color: transparent;
    }

    .page-item.active .page-link {

        &,
        &:focus,
        &:hover {
            background-color: $brand-primary;
            border-color: $brand-primary;
            color: #fff !important;
        }
    }


    // -------------------------
    //  Moodle mods
    // -------------------------
    // -------------------------
    // Quiz
    // -------------------------

    .que {
        border-bottom: 1px solid $brand-primary;
    }

    #snap-changecoverimageconfirmation.disabled .ok {
        &,
        &:hover,
        &:active,
        &:focus {
            color: #fff;
            border-color: #fff;
            background-color: $brand-primary;
        }
    }

    // -------------------------
    // Messaging
    // -------------------------
    .messaging-area-container .messaging-area {
        .contacts-area {
            // Hoverable divs.
            .contacts .contact,
            .contacts .contact.selected,
            .searcharea .course {

                &:hover {
                    background-color: rgba($brand-primary, .5);
                }
            }

            // contact.selected large screen only, media query copied from message.scss
            @media (min-width: 979px) {
                .contacts .contact.selected {
                    background-color: $brand-primary;
                }
            }

            // Tabs to change from messages to contacts.
            .tabs .tab:hover {
                color: darken($brand-primary, 8%);
            }
        }

        // Users own messages.
        .messages-area .messages .message .right .text {
            background-color: $brand-primary;
        }

        // Link and button colours.
        .contacts-area .tabs .tab.selected,
        .btn.btn-link {
            color: $brand-primary;

            &:hover,
            &:focus {
                color: darken($brand-primary, 8%);
            }
        }
    }

    // -------------------------
    // Navigation bar
    // -------------------------
    #mr-nav {
        a {
            color: $nav-color;
            &:hover,
            &:focus {
                color: darken($nav-color, 8%);
            }
        }

        a.snap-login-button {
            color: $nav-login-color;
            background-color: $nav-login-bg;
            border-color: $nav-login-bg;
        }

        .icon.fa-search {
            color: $nav-color;
        }

        .popover-region-notifications > div >.icon {
            color: $nav-color;
            &:hover {
                color: darken($nav-color, 8%);
            }
        }

        #snap-pm-trigger {
            color: $nav-button-color;
        }

        #nav-notification-popover-container .count-container {
            background-color: $nav-color;
        }

        #nav-notification-popover-container {
            // Bell icon.
            .icon.fa-bell {
                color: $nav-color;
            }
        }
        #nav-intellicart-popover-container {
            // Intellicart shopping icon.
            .icon.fa-shopping-cart {
                color: $nav-color;
            }
        }
        .conversation_badge_count {
            background-color: darken($nav-color, 8%);
        }
    }


    // -------------------------
    // Grader Report
    // -------------------------
    span.letter.active,
    .initialbar .letter.active
    {
        background-color: $brand-primary;
        border-color: $brand-primary;
    }

    // -------------------------
    // Extra focus options
    // -------------------------
    #snap-coverimagecontrol > .btn-secondary,
    div[tabindex],
    .btn.btn-link,
    .custom-select,
    .form-control,
    .categoryname,
    .summary > p,
    .atto_group > button,
    .snap-dropzone > .snap-dropzone-label{
        &:focus {
            outline: 3px auto $brand-primary;
        }
    }

    #snap-coverimagecontrol > label.btn-secondary.btn-sm {
        background-color: rgba(255,255,255,0.7);
        &:hover {
            background-color: $brand-primary !important;
            color: #fff;
        }
    }

    .fp-toolbar div  a.btn.btn-secondary.btn-sm,
    .fp-viewbar > a.btn.btn-secondary.btn-sm{
        color: $darker-grey-btn;
        border-color: $light-grey-btn;

        .icon {
            color: $dark-grey-btn;
        }

        &:hover{
            border-color: $dark-grey-btn;
            color: $dark-grey-btn;
            background-color: $lighter-grey-btn;
        }

    }

    .fp-viewbar > a.btn.btn-secondary.btn-sm.checked {
        background-color: $brand-primary;
        border-color: $brand-primary;
        outline-color: $brand-primary;
    }

    #snap-coverimagecontrol > .btn.btn-secondary.btn-sm:hover {
        background-color: $lighter-grey-btn;
    }

    .visibleifjs a.btn{
        color: $brand-primary;
        &:hover{
            color: darken($brand-primary, 8%);
        }
    }
}