// IMPORTS
// ========================================================================== */

// The "box-shadow" mixin uses colors
@import '_mixins';

// Graphic charter
@import '_graphic-charter';


// DEBUG ICON
// ========================================================================== */

#debug-icon {
    background-color: $t-light;
    @include box-shadow(0, 0, 4px, $m-gray);

    a:active,
    a:link,
    a:visited {
        color: $g-orange;
    }
}


// DEBUG BAR
// ========================================================================== */

#debug-bar {
    background-color: $t-light;
    color: $g-gray;

    // Reset to prevent conflict with other CSS files
    h1,
    h2,
    h3,
    p,
    a,
    button,
    table,
    thead,
    tr,
    td,
    button,
    .toolbar {
        background-color: transparent;
        color: $g-gray;
    }

    // Buttons
    button {
        background-color: $t-light;
    }

    // Tables
    table {
        strong {
            color: $g-orange;
        }

        tbody tr {
            &:hover {
                background-color: $m-gray;
            }

            &.current {
                background-color: $m-orange;

                &:hover td {
                    background-color: $g-red;
                    color: $t-light;
                }
            }
        }
    }

    // The toolbar
    .toolbar {
        background-color: $t-light;
        @include box-shadow(0, 0, 4px, $m-gray);

        img {
            filter: brightness(0) invert(0.4);
        }
    }

    // Fixed top
    &.fixed-top {
        .toolbar {
            @include box-shadow(0, 0, 4px, $m-gray);
        }

        .tab {
            @include box-shadow(0, 1px, 4px, $m-gray);
        }
    }

    // "Muted" elements
    .muted {
        color: $g-gray;

        td {
            color: $m-gray;
        }

        &:hover td {
            color: $g-gray;
        }
    }

    // The toolbar preferences
    #toolbar-position,
    #toolbar-theme {
        filter: brightness(0) invert(0.6);
    }

    // The toolbar menus
    .ci-label {
        &.active {
            background-color: $m-gray;
        }

        &:hover {
            background-color: $m-gray;
        }

        .badge {
            background-color: $g-red;
            color: $t-light;
        }
    }

    // The tabs container
    .tab {
        background-color: $t-light;
        @include box-shadow(0, -1px, 4px, $m-gray);
    }

    // The "Timeline" tab
    .timeline {
        th,
        td {
            border-color: $m-gray;
        }

        .timer {
            background-color: $g-orange;
        }
    }
}


// DEBUG VIEW
// ========================================================================== */

.debug-view.show-view {
    border-color: $g-orange;
}

.debug-view-path {
    background-color: $m-orange;
    color: $g-gray;
}