/**
 * This file is part of the CodeIgniter 4 framework.
 *
 * (c) CodeIgniter Foundation <admin@codeigniter.com>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

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

@import '_mixins';
@import '_settings';


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

#debug-icon {
    // Position
    bottom: 0;
    position: fixed;
    right: 0;
    z-index: 10000;

    // Size
    height: 36px;
    width: 36px;

    // Spacing
    margin: 0px;
    padding: 0px;

    // Content
    clear: both;
    text-align: center;

    a svg {
        margin: 8px;
        max-width: 20px;
        max-height: 20px;
    }

    &.fixed-top {
        bottom: auto;
        top: 0;
    }

    .debug-bar-ndisplay {
        display: none;
    }
}


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

#debug-bar {
    // Position
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 10000;

    // Size
    height: 36px;

    // Spacing
    line-height: 36px;

    // Typography
    font-family: $base-font;
    font-size: $base-size;
    font-weight: 400;

    // General elements
    h1 {
        display: flex;
        font-weight: normal;
        margin: 0 0 0 auto;

        svg {
            width: 16px;
            margin-right: 5px;
        }
    }

    h2 {
        font-size: $base-size;
        margin: 0;
        padding: 5px 0 10px 0;

        span {
            font-size: 13px;
        }
    }

    h3 {
        font-size: $base-size - 4;
        font-weight: 200;
        margin: 0 0 0 10px;
        padding: 0;
        text-transform: uppercase;
    }

    p {
        font-size: $base-size - 4;
        margin: 0 0 0 15px;
        padding: 0;
    }

    a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    button {
        border: 1px solid;
        @include border-radius(4px);
        cursor: pointer;
        line-height: 15px;

        &:hover {
            text-decoration: underline;
        }
    }

    table {
        border-collapse: collapse;
        font-size: $base-size - 2;
        line-height: normal;

        // Tables indentation
        margin: 5px 10px 15px 10px;

        // Make sure it still fits the container, even with the margins
        width: calc(100% - 10px);

        strong {
            font-weight: 500;
        }

        th {
            display: table-cell;
            font-weight: 600;
            padding-bottom: 0.7em;
            text-align: left;
        }

        tr {
            border: none;
        }

        td {
            border: none;
            display: table-cell;
            margin: 0;
            text-align: left;

            &:first-child {
                max-width: 20%;

                &.narrow {
                    width: 7em;
                }
            }
        }
    }

    td[data-debugbar-route] {
        form {
            display: none;
        }

        &:hover {
            form {
                display: block;
            }

            &>div {
                display: none;
            }
        }

        input[type=text] {
            padding: 2px;
        }
    }

    // The toolbar
    .toolbar {
        display: flex;
        overflow: hidden;
        overflow-y: auto;
        padding: 0 12px 0 12px;
        
        // Give room for OS X scrollbar
        white-space: nowrap;
        z-index: 10000;
    }

    // Fixed top
    &.fixed-top {
        bottom: auto;
        top: 0;

        .tab {
            bottom: auto;
            top: 36px;
        }
    }

    // The toolbar preferences
    #toolbar-position,
    #toolbar-theme {
        a {
            padding: 0 6px;
            display: inline-flex;
            vertical-align: top;

            &:hover {
                text-decoration: none;
            }
        }
    }

    // The "Open/Close" toggle
    #debug-bar-link {
        display: flex;
        padding: 6px;
    }

    // The toolbar menus
    .ci-label {
        display: inline-flex;
        font-size: $base-size - 2;

        &:hover {
            cursor: pointer;
        }

        a {
            color: inherit;
            display: flex;
            letter-spacing: normal;
            padding: 0 10px;
            text-decoration: none;
            align-items: center;
        }

        // The toolbar icons
        img {
            margin: 6px 3px 6px 0;
            width: 16px !important;
        }

        // The toolbar notification badges
        .badge {
            @include border-radius(12px);
            display: inline-block;
            font-size: 75%;
            font-weight: bold;
            line-height: 12px;
            margin-left: 5px;
            padding: 2px 5px;
            text-align: center;
            vertical-align: baseline;
            white-space: nowrap;
        }
    }

    // The tabs container
    .tab {
        bottom: 35px;
        display: none;
        left: 0;
        max-height: 62%;
        overflow: hidden;
        overflow-y: auto;
        padding: 1em 2em;
        position: fixed;
        right: 0;
        z-index: 9999;
    }

    // The "Timeline" tab
    .timeline {
        margin-left: 0;
        width: 100%;

        th {
            border-left: 1px solid;
            font-size: $base-size - 4;
            font-weight: 200;
            padding: 5px 5px 10px 5px;
            position: relative;
            text-align: left;

            &:first-child {
                border-left: 0;
            }
        }

        td {
            border-left: 1px solid;
            padding: 5px;
            position: relative;

            &:first-child {
                border-left: 0;
                max-width: none;
            }

            &.child-container {
                padding: 0px;

                .timeline {
                    margin: 0px;

                    td {
                        &:first-child {
                            &:not(.child-container) {
                                padding-left: calc(5px + 10px * var(--level));
                            }
                        }
                    }
                }
            }
        }

        .timer {
            @include border-radius(4px);
            display: inline-block;
            padding: 5px;
            position: absolute;
            top: 30%;
        }

        .timeline-parent {
            cursor: pointer;

            td {
                &:first-child {
                    nav {
                        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNTU1Ii8+PC9zdmc+") no-repeat scroll 0 0/15px 75px transparent;
                        background-position: 0 25%;
                        display: inline-block;
                        height: 15px;
                        width: 15px;
                        margin-right: 3px;
                        vertical-align: middle;
                    }
                }
            }
        }

        .timeline-parent-open {
            background-color: #DFDFDF;

            td {
                &:first-child {
                    nav {
                        background-position: 0 75%;
                    }
                }
            }
        }

        .child-row {
            &:hover {
                background: transparent;
            }
        }
    }

    // The "Routes" tab
    .route-params,
    .route-params-item {
        vertical-align: top;

        td:first-child {
            font-style: italic;
            padding-left: 1em;
            text-align: right;
        }
    }
}


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

.debug-view.show-view {
    border: 1px solid;
    margin: 4px;
}

.debug-view-path {
    font-family: monospace;
    font-size: $base-size - 4;
    letter-spacing: normal;
    min-height: 16px;
    padding: 2px;
    text-align: left;
}

.show-view .debug-view-path {
    display: block !important;
}


// RESPONSIVE DESIGN
// ========================================================================== */

@media screen and (max-width: 1024px) {
    #debug-bar {
        .ci-label {
            img {
                margin: unset
            }
        }
    }

    .hide-sm {
        display: none !important;
    }
}


// THEMES
// ========================================================================== */

// Default theme is "Light"
@import '_theme-light';

// If the browser supports "prefers-color-scheme" and the scheme is "Dark"
@media (prefers-color-scheme: dark) {
    @import '_theme-dark';
}

// If we force the "Dark" theme
#toolbarContainer.dark {
    @import '_theme-dark';

    td[data-debugbar-route] input[type=text] {
        background: #000;
        color: #fff;
    }
}

// If we force the "Light" theme
#toolbarContainer.light {
    @import '_theme-light';
}


// LAYOUT HELPERS
// ========================================================================== */

.debug-bar-width30 {
    width: 30%;
}

.debug-bar-width10 {
    width: 10%;
}

.debug-bar-width70p {
    width: 70px;
}

.debug-bar-width140p {
    width: 140px;
}

.debug-bar-width20e {
    width: 20em;
}

.debug-bar-width6r {
    width: 6rem;
}

.debug-bar-ndisplay {
    display: none;
}

.debug-bar-alignRight {
    text-align: right;
}

.debug-bar-alignLeft {
    text-align: left;
}

.debug-bar-noverflow {
    overflow: hidden;
}