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

$spacing: 4;

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

$border: 1px solid $border-color;

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

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

._sage::selection {
  @include selection;
}


._sage,
._sage::before,
._sage::after,
._sage *,
._sage *::before,
._sage *::after {
  box-sizing: border-box;
  border-radius: 0;
  color: $text-color;
  float: none !important;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  line-height: 15px;
  margin: 0;
  padding: 0;
  text-align: left;
}

._sage {
  font-size: 13px;
  margin: $spacing * 2px 0;
  overflow-x: auto;
  white-space: nowrap;

  // invisible symbols
  u {
    color: #ff8c00;
  }

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

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


  }

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

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

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

  dt._sage-parent {
    cursor: pointer;
  }

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

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

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

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

  dt._sage-parent._sage-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-weight: normal;
    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;
  }

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

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

  dt._sage-parent > ._sage-popup-trigger {
    font-size: 13px;
  }

  footer {
    padding: 0 3px 3px;
    font-size: 9px;
    color: #999;
    text-shadow: 0 0 1px #ccc;

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

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

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

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

    li {
      color: #999;
    }

    &._sage-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(._sage-tabs) {
      li {
        border-left: 1px dashed $border-color;

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

    &._sage-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: $spacing * 6px;
        margin: calc($spacing / 2) * 1px;
        padding: 0 2px + round($spacing * 2.5px);
        vertical-align: top;

        &:hover,
        &._sage-active-tab:hover {
          border-color: $border-color-hover;
          color: $variable-type-color-hover;
        }

        &._sage-active-tab {
          background: $main-background;
          border-top: 0;
          margin-top: -1px;
          height: 27px;
          line-height: 24px;
        }

        &:not(._sage-active-tab) {
          line-height: $spacing * 5px;
        }
      }

      li + li {
        margin-left: 0
      }
    }

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

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

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

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

  * {
    font-size: 12px;
  }

  dt {
    background: none;
    padding: calc($spacing/2) * 1px;

    ._sage-parent {
      min-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  td,
  th {
    border: $border;
    padding: calc($spacing/2) * 1px;
    vertical-align: center;
  }

  th {
    cursor: alias;
  }

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

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

    > dl {
      padding: 0;
    }
  }

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

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

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

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

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

  ul._sage-tabs li._sage-active-tab {
    height: 20px;
    line-height: 17px;
  }
}

//
// TRACE
// --------------------------------------------------
._sage-trace {
  ._sage-source {
    line-height: round($spacing * 3.5) * 1px;

    span {
      padding-right: 1px;
      border-right: 3px inset $variable-type-color;
    }

    ._sage-highlight {
      background: $secondary-background;
    }
  }

  b { // line number
    min-width: 18px;
    display: inline-block;
    text-align: right;
    margin-right: 6px;
    color: $variable-name-color;
  }

  ._sage-blacklisted,
  ._sage-childless {
    > b { // line number
      margin-right: 22px;
    }
  }

  ._sage-blacklisted {
    filter: brightness(120%);
  }

  ._sage-parent {
    > var {
      > a {
        color: $variable-type-color;
      }
    }
  }
}

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

// keyboard navigation caret
._sage-focused {
  @include keyboard-caret;
}

._sage-microtime,
._sage-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;
}