$red-front: #ED1C24;
$green-front: #509B49;
$yellow-front: #D6A921;
$red-background: #FFDDDD;
$green-background: #EEFFEE;
$yellow-background: #FFFFDD;
$gray-front: #7A7B7D;
$gray-background: #DDDDDD;

@mixin step_span($front, $back, $with_args: false) {
    > span {
        border: 1px solid $front;
        padding: 0.5em;
        background-color: $back;
        color: $front;

        &:hover { border-width: 3px; }
        ~ * { margin-left: 2em; }
    }

    @if $with_args {

        > div.args {
            font-size: 11px;
            padding: 1em;
            background-color: $back;
            border: 1px solid $front;
        }

        /* skip/pending step style */
        ~ li > span {
            background-color: $gray-background;
            border-color: $gray-front;
            color: $gray-front;
        }
    }
}

@mixin content_centering {
    margin: 0 auto;
    padding: 2em;
}

body {
    background-color: #ffffff;
}

div#report {
    @include content_centering;
    background: black;
    color: $green-front;
}

footer {
    @include content_centering;
    background: black;
    color: $green-front;
    text-align: right;
}

div#main {
    @include content_centering;
    background-color: #ffffff;

    .ui-tabs-nav {
        border-width: 0;
        padding: 0;
    }

    .ui-tabs-panel {
        border: 1px solid $gray-front;
    }
}

div#steps-statistics section.scenario {
    margin: 1em 0em;
    padding-left: 1em;
    border: 2px solid green;

    > header {
        margin: 1em 0em;

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

        span.scenario_name {
            font-weight: bold;
            font-size: 14px;
        }

        span.feature_name {
            font-size: 13px;
            color: #839496;
        }

        span.permalink {
            margin-right: 1em;
            font-size: 15px;
            a { color: #268bd2; }
        }
    }

    > ul.tags {
        font-size: 12px;

        li {
            color: #839496;
            display: inline;
        }
    }

    &.passed {
        border-color: $green-front;

        > header .scenario_name {
            color: $green-front;
            &:before { content: "\2713\20"; }
        }
    }

    &.failed {
        border-color: $red-front;

        > header .scenario_name {
            color: $red-front;
            &:before { content: "\2717\20"; }
        }
    }

    &.pending {
        border-color: $yellow-front;

        > header .scenario_name {
            color: $yellow-front;
            &:before { content: "\d8\20"; }
        }
    }

    ul.steps {
        font-size: 12px;
        list-style-type: none;

        li.step {
            padding: 0.5em;
            font-weight: bold;
            margin: 0.5em 0em;

            @include step_span($green-front, $green-background);

            &.failure {
                @include step_span($red-front, $red-background, true);
            }

            &.pending {
                @include step_span($yellow-front, $yellow-background, true);
            }
        }

        table.step_outline {
            margin-top: 2em;

            tr:nth-child(odd) { 
                background-color: #ddddcc;
            }

            tr:nth-child(even) {
                background-color: #ccccdd;
            }

            td {
                border: 2px solid black;
                padding: 0.3em 1em;
            }
        }

        pre.multiline {
            margin-top: 2em;
            font-size: 13px;
            color: #586e75;
        }
    }
}

@mixin tablesorter-header {
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
}

div#speed-statistics,
div#feature-statistics,
div#tag-statistics {
    table {
        width: 100%;
        margin: 1em 0em;
        
        thead {
            th {
                border-bottom: 1px solid $gray-front;
            }
        }

        tbody {
            tr:nth-child(odd) { 
                background-color: #FFFFFF;
            }

            tr:nth-child(even) {
                background-color: $gray-background;
            }

            td {
                border: 1px solid $gray-front;
                padding: 0.3em 1em;

                &.passed {
                    background-color: $green-background;
                    color: $green-front;
                }
                &.failed {
                    background-color: $red-background;
                    color: $red-front;
                }
                &.pending {
                    background-color: $yellow-background;
                    color: $yellow-front;
                }
            }
        }
    }
}

div#speed-statistics {
    .tablesorter-header {
        @include tablesorter-header;
        background-image: url("data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==");

        &.sorter-false {
            background: none;
        }
    }

    .tablesorter-headerAsc {
        @include tablesorter-header;
        background-image: url("data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7");
    }

    .tablesorter-headerDesc {
        @include tablesorter-header;
        background-image: url("data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7");
    }
}

section.exception {
    margin: 1em 0em;
    border: 2px solid #268bd2;
    padding: 2em;

    dt {
        line-height: 2em;
        font-size: 15px;
    }

    dd {
        line-height: 2em;
        font-size: 14px;
    }
}