@import 'inc/bootstrap';

.test-runner-scope {
    .content-wrapper {
        :not(.writing-mode-vertical-rl) {
            p.key-navigation-group,
            div.key-navigation-group:not(.select2-container):not(.writing-mode-vertical-rl):not(:has) {
                padding: 5px !important;
            }
        }
        .key-navigation-group:not(.qti-extendedTextInteraction):not(.qti-textEntryInteraction):not(
                .qti-customInteraction
            ):not(.qti-choiceInteraction) {
            border-width: 1px !important;
            border-style: solid;
            border-color: transparent; //do not mark it as important to allow color overriding
            &.focusin {
                border-color: $info !important;
                outline: none;
            }
        }
        .key-navigation-group:not(.qti-customInteraction) {
            &.qti-interaction {
                .qti-choice.key-navigation-highlight:not(.tts-content-node) {
                    background: whiten($info, 0.9) !important;
                }
            }
        }
        .key-navigation-group.focusin:focus {
            &.qti-extendedTextInteraction,
            &.qti-choiceInteraction {
                outline: 1px solid $info;
            }
        }
        /* focus on checkbox input */
        .key-navigation-group.qti-choiceInteraction.focusin:not(:focus) .choice-area,
        /* mousedown on choice -> focus on closest parent with tabindex="-1" (.choice-area) -> mouseup -> focus on checkbox input */
        .key-navigation-group.qti-choiceInteraction .choice-area:focus {
            outline: 1px solid $info;
        }
        span.key-navigation-group {
            border: none !important;
            &.focusin {
                outline: solid $info 1px !important;
                outline-offset: 1px;
            }
        }
    }

    .test-sidebar {
        .key-navigation-group {
            &.focusin {
                background: whiten($info, 0.9);
            }
            .qti-navigator-filters {
                .key-navigation-highlight {
                    .qti-navigator-tab {
                        border-width: 2px;
                    }
                    &:focus {
                        outline: none;
                        .qti-navigator-tab {
                            border-top-color: $textColor !important;
                            border-left-color: $textColor !important;
                            border-right-color: $textColor !important;
                        }
                    }
                }
            }
            li.qti-navigator-item.key-navigation-highlight {
                padding-left: 8px;
                border-left: solid 2px $textColor;
                .key-navigation-highlight:focus {
                    outline: none;
                }
            }
        }
        .qti-navigator-fizzy .key-navigation-group.focusin {
            background: $uiReviewPanelBg;
        }
    }

    .bottom-action-bar.content-action-bar {
        &.key-navigation-group {
            &.focusin {
                @include box-shadow(0, 0, 6px, 2px, whiten($info, 0.2));
            }
            .key-navigation-highlight {
                &:focus {
                    margin-bottom: 0;
                    border-bottom-color: whiten($info, 0.9) !important;
                    outline: none;
                    &.active {
                        border-bottom-color: transparent !important;
                        background: whiten($info, 0.9) !important;
                    }
                    &:not(.active):not(:active) {
                        .li-inner {
                            color: whiten($info, 0.9);
                        }
                    }
                }
            }
        }
    }
}

header {
    .settings-menu {
        .key-navigation-group {
            padding-right: 5px;
            &.focusin {
                background-color: rgba($info, 0.5);
                padding-bottom: 10px;
            }
        }
        .key-navigation-highlight {
            &:focus {
                height: 54px;
                color: white !important;
                border-bottom: solid 2px white !important;
            }
        }
    }
}