//
// VARIABLES FOR THEMES TO OVERRIDE
// --------------------------------------------------

@default-font: Consolas, "Courier New", monospace;

@spacing : 4;

// caret taken from solarized
@caret-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8CAMAAACO5hB7AAAA7VBMVEVYbnWToaH///9YbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnWToaGToaGToaGToaGToaGToaGToaGToaGToaFYbnWToaFYbnVYbnWToaGToaFYbnWToaFYbnWToaFYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnWToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaGToaFYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnVYbnWToaGToaGToaGToaGToaGToaGToaGToaGToaFYbnWToaEeRtj1AAAATXRSTlMAAACLab0B7iP2R7CL9iPuaUewAb36F0/QnPoX0JxPYQaurepi6QV8FhV7MzFhM6586RYFMa3qYnsVBpNQ+ZGOGJ3PkM9QkZAY+Y6TnV7gnYsAAAEcSURBVHhebdHVbgMxEEBRu8sUZmqapBBoSuGUmWb+/3NayxtrLOe+Hck745XZgd6/eb3CVcKt7HmR+gKxlCGOETG5vFbOoahR6NxI5zHt6nuq+2dqnqfzzH3mfcz70vb8H6MJt5u6a96hS30E4PjEFgAEp2fKNojKUfVEOoS044ex7u3YPE/nmfvM+5j3pe17T9oe/77O41w+n4vnrbrwZxbTshVhvtx5Kb8vliRLRWmeSQSTjJq/El5x5fUXYmNN9hcQC5y4g/hGvVksNtT8451rns2IScb7mn567ll2GNpWr9YWfvQgzWsKs8HOA/m960g6rjTzA8HAV/NHwiOmPLwDKA/J/gggYsRVgFvqbr/fpWYv90zzZKKs9Qfx00Jx65oxLAAAAABJRU5ErkJggg==");

//
// SET UP HELPER VARIABLES
// --------------------------------------------------

@border: 1px solid @border-color;

.selection() {
  background : @border-color-hover;
  color      : @text-color;
}

//
// BASE STYLES
// --------------------------------------------------

.kint::selection { .selection() }

.kint::-moz-selection { .selection() }

.kint::-webkit-selection { .selection() }

.kint {
  font-family : @default-font;
  color       : @text-color;
  padding     : 0;
  margin      : @spacing * 2px 0;
  font-size   : 10pt;
  line-height : 15px;
  white-space : nowrap;
  overflow-x  : auto;
  text-align  : left;

  * {
    float       : none !important;
    line-height : 15px;
    padding     : 0;
    margin      : 0;
  }

  dt {
    background  : @main-background;
    border      : @border;
    color       : @text-color;
    display     : block;
    font-weight : bold;
    list-style  : none outside none;
    padding     : @spacing * 1px;

    &:hover {
      border-color : @border-color-hover;
    }

    > var {
      margin-right : 5px;
    }
  }

  > dl dl {
    padding : 0 0 0 @spacing * 3px;
  }

  //
  // DROPDOWN CARET
  // --------------------------------------------------

  nav {
    display        : inline-block;
    height         : 15px;
    width          : 15px;
    margin-right   : 3px;
    vertical-align : middle;
    content        : ' ';
    cursor         : pointer;
    background     : @caret-image no-repeat scroll 0 0 transparent;
  }

  dt.kint-parent:hover nav {
    background-position : 0 -15px;
  }

  dt.kint-parent.kint-show:hover > nav {
    background-position : 0 -45px;
  }

  dt.kint-show > nav {
    background-position : 0 -30px;
  }

  dt.kint-parent + dd {
    display     : none;
    border-left : 1px dashed @border-color;
  }

  dt.kint-parent.kint-show + dd {
    display : block;
  }

  //
  // INDIVIDUAL ITEMS
  // --------------------------------------------------

  var,
  var a {
    color      : @variable-type-color;
    font-style : normal;
  }

  dt:hover var,
  dt:hover var a {
    color : @variable-type-color-hover;
  }

  dfn {
    font-style  : normal;
    font-family : monospace;
    color       : @variable-name-color;
  }

  pre {
    color      : @text-color;
    margin     : 0 0 0 @spacing * 3px;
    padding    : 5px;
    overflow-y : hidden;
    border-top : 0;
    border     : @border;
    background : @main-background;
    display    : block;
    word-break : normal;
  }

  .kint-popup-trigger {
    float  : right !important;
    cursor : pointer;
    color  : @border-color-hover;

    &:hover {
      color : @border-color;
    }
  }

  dt.kint-parent > .kint-popup-trigger {
    font-size : 15pt;
  }

  footer {
    padding   : 0 3px 3px;
    font-size : .7em;

    > .kint-popup-trigger {
      font-size : 12px;
    }

    nav {
      background-size : 10px;
      height          : 10px;
      width           : 10px;

      &:hover {
        background-position : 0 -10px;
      }
    }

    > ol {
      display     : none;
      margin-left : 32px;
    }

    &.kint-show {
      > ol {
        display : block;
      }

      nav {
        background-position : 0 -20px;

        &:hover {
          background-position : 0 -30px;
        }
      }
    }
  }

  a {
    color       : @text-color;
    text-shadow : none;

    &:hover {
      color         : @variable-name-color;
      border-bottom : 1px dotted @variable-name-color;
    }
  }

  //
  // TABS
  // --------------------------------------------------

  ul {
    list-style   : none;
    padding-left : @spacing * 3px;

    &:not(.kint-tabs) {
      li {
        border-left : 1px dashed @border-color;

        > dl {
          border-left : none;
        }
      }
    }

    &.kint-tabs {
      margin       : 0 0 0 @spacing * 3px;
      padding-left : 0;
      background   : @main-background;
      border       : @border;
      border-top   : 0;

      li {
        background  : @secondary-background;
        border      : @border;
        cursor      : pointer;
        display     : inline-block;
        height      : 16px + ceil(8px * (@spacing / 5));
        line-height : 16px + ceil(8px * (@spacing / 5));
        margin      : 0 @spacing * 1px @spacing * 1px;
        padding     : 0 2px + @spacing * 2px floor(3px * (@spacing / 5));

        &:hover,
        &.kint-active-tab:hover {
          border-color : @border-color-hover;
          color        : @variable-type-color-hover;
        }

        &.kint-active-tab {
          background     : @main-background;
          border-top     : 0;
          margin-top     : -1px;
          padding-bottom : floor(3px * (@spacing / 5));
          padding-top    : 1px + ceil(3px * (@spacing / 5));
        }
      }

      li + li {
        margin-left : 0
      }
    }

    &:not(.kint-tabs) > li:not(:first-child) {
      display : none;
    }
  }

  dt:hover + dd > ul > li.kint-active-tab {
    border-color : @border-color-hover;
    color        : @variable-type-color-hover;
  }
}

//
// REPORT
// --------------------------------------------------

.kint-report {
  border-collapse : collapse;
  empty-cells     : show;
  border-spacing  : 0;

  * {
    text-align  : left;
    padding     : 0 !important;
    margin      : 0 !important;
    font-size   : 9pt;
    overflow    : hidden;
    font-family : @default-font;
    color       : @text-color;
  }

  dt {
    border     : 0;
    background : none;

    .kint-parent {
      max-width     : 180px;
      min-width     : 100%;
      overflow      : hidden;
      text-overflow : ellipsis;
      white-space   : nowrap;
      &.kint-show {
        border-bottom : @border;
      }
    }
  }

  td,
  th {
    border         : @border;
    vertical-align : top;
  }

  td {
    background  : @main-background;
    white-space : pre;

    > dl {
      border : 0;
    }
  }

  pre {
    border-top    : 0;
    border-bottom : 0;
    border-right  : 0;
  }

  th:first-child {
    background : none;
    border     : 0;
  }

  td:first-child,
  th {
    font-weight : bold;
    background  : @secondary-background;
    color       : @variable-name-color;
  }

  td.kint-empty {
    background : #d33682 !important;
  }

  tr:hover {
    > td {
      box-shadow : 0px 0px 1px 0px @border-color-hover inset;
    }

    var {
      color : @variable-type-color-hover;
    }
  }
}

//
// TRACE
// --------------------------------------------------
.kint-trace {
  .kint-source {
    line-height : 1em + 0.02 * @spacing
  }

  .kint-source span {
    padding-right : 1px;
    border-right  : 3px inset @variable-type-color;
  }

  .kint-source .kint-highlight {
    background : @secondary-background;
  }

  .kint-parent {
    > b {
      min-width  : 18px;
      display    : inline-block;
      text-align : right;
      color      : @variable-name-color;
    }

    > var {
      > a {
        color : @variable-type-color;
      }
    }
  }
}

//
// MISC
// --------------------------------------------------

// keyboard navigation caret
.kint-focused {
  .keyboard-caret
}

.kint-microtime,
.kint-color-preview {
  box-shadow  : 0 0 2px 0 #b6cedb;
  height      : 16px;
  text-align  : center;
  text-shadow : -1px 0 #839496, 0 1px #839496, 1px 0 #839496, 0 -1px #839496;
  width       : 230px;
  color       : #fdf6e3;
}