@mixin box-shadow($dx, $dy, $radius, $color) {
    -moz-box-shadow: $dx $dy $radius $color;
    -webkit-box-shadow: $dx $dy $radius $color;
    box-shadow: $dx $dy $radius $color;
}

$anchorColor: #0077CC;
$buttonBorderColor: #888;
$numberColor: #111;
$textColor: #555;
$mutedColor: #aaa;
$normalFonts: Helvetica, Arial, sans-serif;
$codeFonts: Consolas, monospace, serif;
$zindex:2147483640; // near 32bit max 2147483647

// do some resets
.profiler-result, .profiler-queries {
    color:#555;
    line-height:1;
    font-size:12px;

    pre, code, label, table, tbody, thead, tfoot, tr, th, td {
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        font:inherit;
        vertical-align:baseline;
        background-color:transparent;
        overflow:visible;
        max-height:none;
    }
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    a, a:hover {
        cursor:pointer;
        color:$anchorColor;
    }
    a {
        text-decoration:none;
        &:hover {
            text-decoration:underline;
        }
    }
}

// styles shared between popup view and full view
.profiler-result
{

    .profiler-toggle-duration-with-children
    {
        float: right;
    }
    table.profiler-client-timings
    {
        margin-top: 10px;
    }
    font-family:$normalFonts;

    .profiler-label {
        color:$textColor;
        overflow:hidden;
        text-overflow: ellipsis;
    }

    .profiler-unit {
        color:$mutedColor;
    }

    .profiler-trivial {
        display:none;
        td, td * {
            color:$mutedColor !important;
        }
    }

    pre, code, .profiler-number, .profiler-unit {
        font-family:$codeFonts;
    }

    .profiler-number {
        color:$numberColor;
    }

    .profiler-info {
        text-align:right;
        .profiler-name {
            float:left;
        }
        .profiler-server-time {
            white-space:nowrap;
        }
    }

    .profiler-timings {
        th {
            background-color:#fff;
            color:$mutedColor;
            text-align:right;
        }
        th, td {
            white-space:nowrap;
        }
        .profiler-duration-with-children {
            display:none;
        }
        .profiler-duration {
            color:$numberColor;
            text-align:right;
        }
        .profiler-indent {
            letter-spacing:4px;
        }
        .profiler-queries-show {
            .profiler-number, .profiler-unit {
                color:$anchorColor;
            }
        }
        .profiler-queries-duration {
            padding-left:6px;
        }
        .profiler-percent-in-sql {
            white-space:nowrap;
            text-align:right;
        }

        tfoot {
            td {
                padding-top:10px;
                text-align:right;

                a {
                    font-size:95%;
                    display:inline-block;
                    margin-left:12px;

                    &:first-child {
                        float:left;
                        margin-left:0px;
                    }
                    &.profiler-custom-link {
                        float:left;
                    }
                }
            }
        }
    }

    .profiler-queries {
        font-family:$normalFonts;

        .profiler-stack-trace {
            margin-bottom:15px;
        }

        tbody tr {
          border-bottom: 1px solid #f1f1f1;
        }

        tr {
          background-color: #FFF;
        }

        tr.slow {
          background-color: #FEE;
        }

        tr.very-slow {
          background-color: #FDD;
        }

        tr.very-very-slow {
          background-color: #FCC;
        }

        pre {
            font-family:$codeFonts;
            white-space:pre-wrap;
        }

        th {
            background-color:#fff;
            border-bottom:1px solid #555;
            font-weight:bold;
            padding:15px;
            white-space:nowrap;
        }

        td {
            padding:15px;
            text-align:left;

            &:last-child {
                padding-right:25px; // compensate for scrollbars
            }
        }

        .profiler-since-start, .profiler-duration {
            text-align:right;
        }

        .profiler-info div {
            text-align:right;
            margin-bottom:5px;
        }

        .profiler-gap-info, .profiler-gap-info td { background-color: #ccc;}
        .profiler-gap-info  {
            .profiler-unit {color: #777;}
            .profiler-info {text-align: right}
            &.profiler-trivial-gaps {display: none}
        }

        .profiler-trivial-gap-container { text-align: center;}

        // prettify colors
        .str{color:maroon}
        .kwd{color:#00008b}
        .com{color:gray}
        .typ{color:#2b91af}
        .lit{color:maroon}
        .pun{color:#000}
        .pln{color:#000}
        .tag{color:maroon}
        .atn{color:red}
        .atv{color:blue}
        .dec{color:purple}
    }

    .profiler-warning, .profiler-warning *, .profiler-warning .profiler-queries-show, .profiler-warning .profiler-queries-show .profiler-unit { // i'm no good at css
        color:#f00;
        &:hover {
            color:#f00;
        }
    }

    .profiler-nuclear {
        color:#f00;
        &:hover {
            color:#f00;
        }
        font-weight:bold;
        padding-right:2px;
    }
}

// ajaxed-in results will be appended to this
.profiler-results
{
    z-index:$zindex + 3;
    position:fixed;

    $radius:10px;

    &.profiler-top {
      top:0px;
      
      &.profiler-left {
          left:0px;

          &.profiler-no-controls .profiler-totals, &.profiler-no-controls .profiler-result:last-child .profiler-button, .profiler-controls {
              -webkit-border-bottom-right-radius: $radius;
              -moz-border-radius-bottomright: $radius;
              border-bottom-right-radius: $radius;
          }

          .profiler-button, .profiler-controls {
              border-right: 1px solid $buttonBorderColor;
          }
      }

      &.profiler-right {
          right:0px;

          &.profiler-no-controls .profiler-totals, &.profiler-no-controls .profiler-result:last-child .profiler-button, .profiler-controls {
              -webkit-border-bottom-left-radius: $radius;
              -moz-border-radius-bottomleft: $radius;
              border-bottom-left-radius: $radius;
          }

          .profiler-button, .profiler-controls {
              border-left: 1px solid $buttonBorderColor;
          }
      }
    }

    &.profiler-bottom {
      bottom:0px;

      &.profiler-left {
          left:0px;

          &.profiler-no-controls .profiler-totals, &.profiler-no-controls .profiler-result:first-child .profiler-button, .profiler-controls {
              -webkit-border-top-right-radius: $radius;
              -moz-border-radius-topright: $radius;
              border-top-right-radius: $radius;
          }

          .profiler-button, .profiler-controls {
              border-right: 1px solid $buttonBorderColor;
          }
      }

      &.profiler-right {
          right:0px;

          &.profiler-no-controls .profiler-totals, &.profiler-no-controls .profiler-result:first-child .profiler-button, .profiler-controls {
              -webkit-border-bottom-top-radius: $radius;
              -moz-border-radius-topleft: $radius;
              border-top-left-radius: $radius;
          }

          .profiler-button, .profiler-controls {
              border-left: 1px solid $buttonBorderColor;
          }
      }
    }

    .profiler-button, .profiler-controls {
        display:none;
        z-index:$zindex;
        border-bottom: 1px solid $buttonBorderColor;
        background-color:#fff;
        padding: 4px 7px;
        text-align:right;
        cursor:pointer;

        &.profiler-button-active {
            background-color:maroon;

            .profiler-number, .profiler-nuclear {
                color:#fff;
                font-weight:bold;
            }
            .profiler-unit {
                color:#fff;
                font-weight:normal;
            }
        }
    }


    .profiler-totals {
      .profiler-reqs {
        font-family: $codeFonts;
        font-size: 10px;
        margin-left: 6px;
        &:before {
          font-family: $codeFonts;
          content: "×";
          margin-right: 1px;
        }
      }
    }

    .profiler-controls {
        display: block;
        font-size:12px;
        font-family: $codeFonts;
        cursor:default;
        text-align: center;

        span {
            border-right: 1px solid $mutedColor;
            padding-right: 5px;
            margin-right: 5px;
            cursor:pointer;
        }

        span:last-child {
            border-right: none;
        }
    }

    .profiler-popup {
        display:none;
        z-index:$zindex + 1;
        position:absolute;
        background-color:#fff;
        border: 1px solid #aaa;
        padding:5px 10px;
        text-align:left;
        line-height:18px;
        overflow:auto;

        @include box-shadow(0px, 1px, 15px, #555);

        .profiler-info {
            margin-bottom:3px;
            padding-bottom:2px;
            border-bottom:1px solid #ddd;

            .profiler-name {
                font-size:110%;
                font-weight:bold;
                .profiler-overall-duration {
                    display:none;
                }
            }
            .profiler-server-time {
                font-size:95%;
            }
        }

        .profiler-timings {

            th, td {
                padding-left:6px;
                padding-right:6px;
            }

            th {
                font-size:95%;
                padding-bottom:3px;
            }

            .profiler-label {
                max-width:275px;
            }
        }
    }

    .profiler-queries {
        display:none;
        z-index:$zindex + 3;
        position:absolute;
        overflow-y:auto;
        overflow-x:auto;
        background-color:#fff;

        th {
            font-size:17px;
        }
    }

    &.profiler-min .profiler-result {
        display: none;
    }

    &.profiler-min .profiler-controls span {
        display: none;
    }

    &.profiler-min .profiler-controls .profiler-min-max {
        border-right: none;
        padding: 0px;
        margin: 0px;
    }

    .profiler-more-actions { float: left; }

    @media print {
      display: none;
    }
}

// popup results' queries will be displayed in front of this
.profiler-queries-bg {
    z-index:$zindex + 2;
    display:none;
    background:#000;
    opacity:0.7;
    position:absolute;
    top:0px;
    left:0px;
    min-width:100%;
}


// used when viewing a shared, full page result
.profiler-result-full {
    .profiler-result {

        width:950px;
        margin:30px auto;

        .profiler-button {
            display:none;
        }

        .profiler-popup {

            .profiler-info {
                font-size: 25px;
                border-bottom:1px solid $mutedColor;
                padding-bottom:3px;
                margin-bottom:25px;

                .profiler-overall-duration {
                    padding-right:20px;
                    font-size:80%;
                    color:#888;
                }
            }

            .profiler-timings {
                td, th {
                    padding-left:8px;
                    padding-right:8px;
                }
                th {
                    padding-bottom:7px;
                }
                td {
                    font-size:14px;
                    padding-bottom:4px;

                    &:first-child {
                        padding-left:10px;
                    }
                }

                .profiler-label {
                    max-width:550px;
                }
            }
        }

        .profiler-queries {
            margin:25px 0;
            table {
                width:100%;
            }
            th {
                font-size:16px;
                color:#555;
                line-height:20px;
            }

            td {
                padding:15px 10px;
                text-align:left;
            }

            .profiler-info div {
                text-align:right;
                margin-bottom:5px;
            }
        }
    }

}