/***
 * @copyright Copyright (c) 2017, Magnus Walbeck <mw@mwalbeck.org>
 *
 * @license GNU AGPL version 3 or any later version, see COPYING file for more.
 */

/* App navigation ----------------------------------------------------------- */

#app-navigation:not(.vue) {
    > ul > li > a,
    > ul > li > ul > li > a {
        opacity: 1;
    }

    > ul > li > ul > li:hover > a,
    > ul > li > ul > li:focus > a {
        background-color: unset;
    }

    .collapsible::before {
        background-color: unset;
    }

    .collapsible:hover > .svg {
        background-color: var(--color-background-hover);
        background-image: none !important;
    }
}

.app-navigation {
    .app-navigation-caption__title {
        opacity: 1 !important;
    }
}

#app-settings-header .settings-button {
	opacity: 1;
}

/* App Sidebar -------------------------------------------------------------- */

.app-sidebar-tabs__tab a {
    &:not(.active):hover,
    &:not(.active):focus {
        border-bottom-color: var(--color-background-hover) !important;
        box-shadow: inset 0 -1px 0 var(--color-background-hover) !important;
    }

    &.active,
    &.active:focus,
    &.active:active {
        border-bottom-color: var(--color-primary-element) !important;
        box-shadow: inset 0 -1px 0 var(--color-primary-element) !important;
    }
}

.versionsTabView li {
    border-color: var(--color-border);

    &:hover {
        background: var(--color-background-hover);
    }
}

.app-sidebar-tabs__content section {
    box-shadow: none !important;
}

#tab-comments .comment-form form input[type="submit"] {
    opacity: 0.7;

    &:hover {
        opacity: 1;
    }
}

#app-sidebar-vue.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--star,
#app-sidebar.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--star {
	color: var(--color-main-text);

    &:hover {
        color: var(--color-icon-yellow);
    }
}

#app-sidebar-vue.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--starred
#app-sidebar.app-sidebar .app-sidebar-header__desc .app-sidebar-header__star .star--starred {
	color: var(--color-icon-yellow);

    &:hover {
        color: var(--color-main-text);
    }
}

/* App Store ---------------------------------------------------------------- */

.app-settings #app-sidebar-vue .app-sidebar-header__figure {
    filter: invert(5%);
}

/* CodeMirror --------------------------------------------------------------- */

.EasyMDEContainer .CodeMirror {
    background-color: var(--color-main-background);
    border: unset !important;
    color: var(--color-main-text);

    .cm-formatting {
        opacity: 0.5;
    }

    .cm-link {
        color: var(--color-text-link) !important;
    }

    .cm-s-easymde .cm-url,
    .cm-s-easymde .cm-string {
        color: var(--color-text-inactive) !important;
    }

    .CodeMirror-selected {
        background-color: var(--color-main-background) !important;
    }

    .CodeMirror-selectedtext {
        background-color: var(--color-text-selection) !important;
        color: var(--color-main-text);
    }

    .CodeMirror-cursor {
        border-left-color: var(--color-main-text);
    }
}

// CodeMirror Markdown preview
// For Deck and Notes

#description-preview,
.note-preview {
    a {
        color: var(--color-text-link) !important;
        opacity: 1 !important;
    }

    pre {
        background-color: var(--color-background-darker) !important;
        border: 1px solid var(--color-border);
        border-radius: 3px;
        padding: 16px !important;
    }

    code {
        background-color: var(--color-background-darker) !important;
    }

    blockquote {
        border-left: 4px solid var(--color-border);
        color: var(--color-main-text);
        font-style: italic;
        padding-left: 2ex;
    }
}

/* mx-datepicker ------------------------------------------------------------ */

.mx-datepicker .mx-input-wrapper .mx-input:active {
    background-color: var(--color-main-background) !important;
}

/* vue-treeselect ----------------------------------------------------------- */

.vue-treeselect__menu {
    background-color: var(--color-main-background) !important;
    border-color: var(--color-border) !important;
}

.vue-treeselect__input-container,
.vue-treeselect__input {
    background-color: var(--color-main-background) !important;
}

.vue-treeselect__single-value {
    color: var(--color-main-text) !important;
}

.vue-treeselect__option--highlight {
    background-color: var(--color-background-hover) !important;
}

.vue-treeselect--single .vue-treeselect__option--selected {
    background-color: var(--color-primary) !important;
}

/* vue-checkboxes ----------------------------------------------------------- */

.checkbox-radio-switch:not(.checkbox-radio-switch--disabled)
    .checkbox-radio-switch__input:hover
    + .checkbox-radio-switch__label[data-v-5cec6b50],
.checkbox-radio-switch:not(.checkbox-radio-switch--disabled)
    .checkbox-radio-switch__input:focus
    + .checkbox-radio-switch__label[data-v-5cec6b50] {
    background-color: var(--color-background-hover) !important;
}