@import 'hint';

$darkBlue: #252839; $darkGray: #677077; $lightGray: b5b5b7; $darkYellow: f2b632; $monospace: Ricty, Consolas, 'Courier New', Courier, Monaco, monospace;

}

html, body {

font-size: 12px;
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: $darkBlue;
font-family: $monospace;

}

// Classes

.clearfix:after {

content: "";
display: block;
clear: both;

}

.duration-ms {

position: absolute;
top: 50%;
right: 20px;
margin-top: -.6em;
font-weight: normal;
background-color: rgba(0, 0, 0, .3);
color: #fff;
line-height: 1;
padding: 0.2em 10px;
border-radius: 2px;

}

class^=“icon-”

{

margin-right: 5px;
vertical-align: baseline;
font-size: 120%;

}

report {

position: relative;
background-color: #efefef;
color: $darkBlue;
line-height: 36px;
height: 36px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
z-index: 10;

h1 {
  position: relative;
  margin: 0 300px 0 0;
  padding: 0 20px;
}

.tabs {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 28px;

  & > a {
    display: inline-block;
    padding: 4px 20px 0 20px;
    text-decoration: none;
    color: $darkBlue;
    width: 150px;
    text-align: center;
    border-bottom: 4px solid transparent;
    transition: border-bottom-color .2s ease-in-out;

    &.active {
      border-bottom-color: lighten($darkBlue, 20%);
    }
  }
}

}

events, sources {

position: absolute;
top: 36px;
left: 0;
right: 0;
bottom: 0;

&.active {
  z-index: 1;
}

}

events {

overflow-y: auto;
background-color: #fff;

}

event-details {

.event {
  .event-info {
    margin: 20px;
    border: 1px solid $darkYellow;
    border-radius: 4px;
    overflow: hidden;

    &.closed {
      .icon-square-plus {
        display: inline-block;
      }

      .icon-square-minus {
        display: none;
      }

      .event-payload {
        display: none;
      }
    }

    .icon-square-plus {
      display: none;
    }

    .icon-square-minus {
      display: inline-block;
    }

    .event-name {
      position: relative;
      margin: 0;
      padding: 10px 10px;
      background-color: $darkYellow;

      a {
        display: block;
        color: #fff;
        text-decoration: none;
      }
    }

    .event-payload {
      table {
        margin: 0;
        width: 100%;
        border-collapse: collapse;

        td {
          padding: 10px 20px;
          border: 1px solid #ccc;
          border-width: 0 1px 1px 0;
          vertical-align: top;
          word-wrap: break-word;
          word-break: break-all;

          &:first-child {
            width: 150px;
            background-color: #efefef;
          }

          &:last-child {
            border-right-width: 0;
          }

          &.table {
            padding: 0;
          }
        }

        & tr:last-child > td {
          border-bottom-width: 0;
        }
      }
    }
  }
}

.event-children {
  padding-left: 20px;
}

.backtraces {
  margin: 0;
  padding: 0;
  list-style: none outside;

  .backtrace {
    a {
      display: block;
      color: inherit;
      text-decoration: none;

      .icon-fast-forward {
        margin-left: 10px;
      }
    }
  }
}

}

sources {

background-color: $darkBlue;

}

source-list, source-code {

position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;

}

source-list {

left: 0;
width: 300px;
background-color: #fff;

.source-link {
  border-bottom: 1px solid #ccc;

  &.focus {
    background-color: #eee;
  }

  a {
    display: block;
    padding: 10px 20px;
    color: $darkBlue;
    text-decoration: none;
  }

  .shortpath, .fullpath {
    display: block;
  }

  .shortpath {
    margin-bottom: 5px;
  }

  .fullpath {
    font-size: 9px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
  }
}

}

source-code {

left: 300px;
right: 0;
overflow-x: hidden;

.source {
  display: none;

  .filename {
    margin: 0;

    a {
      background-color: lighten($darkBlue, 20%);
      display: block;
      padding: 10px 20px;
      color: #fff;
      text-decoration: none;
    }
  }
}

.source-line {
  position: relative;
  margin: 0;
  padding: 0 0 0 400px;
  color: #fff;
  font-size: 14px;
  transition: all .2s ease-in-out;

  &.focus {
    color: $darkYellow;
    background-color: lighten($darkBlue, 20%);
  }

  .line-info {
    @extend .clearfix;
    position: absolute;
    width: 400px;
    top: 0;
    left: 0;
  }

  .line-info div {
    float: left;
    text-align: right;
  }

  .line-info a {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .line-cpu,
  .line-wall,
  .line-allocs {
    width: 90px;
  }

  .line-calls {
    width: 60px;
  }

  .line-no {
    width: 70px;
    padding-right: 20px;
  }

  .line-code {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: $monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
  }

  .line-info, .line-code {
    line-height: 2;
  }
}

}