/**
 * @author Ante Aljinovic https://github.com/aljinovic
 */

$main-background: #f8f8f8;
$secondary-background: #f8f8f8;

$text-color: #1d1e1e;
$variable-name-color: #1d1e1e;
$variable-type-color: #06f;
$variable-type-color-hover: #f00;

$border-color: #d7d7d7;
$border-color-hover: #aaa;

$caret-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8CAYAAAC5OOBJAAAAvklEQVR42mNgGMFAS0uLLSQk5HxoaOh/XDg4OLgdpwEBAQEGQAN+YtMIFH/i4ODAg9cFQNMbsWkOCgrKJMv5ID5Qipko/6M7PzAw0ImkAIQ5H0hvISv0gZpP+fn5qZAVfcBAkmEYBaNZcjRLjmbJUUCvqAIlDlAiASUWkjWDkiU0eTaSpBGUEZBy1E9QRiFWLzO2LEmU80GZHkcRhN/5oGIGVNzgKIbwOx9UwOErAIl2/igYzZKjWXI0S9IHAAASJijo0Ypj8AAAAABJRU5ErkJggg==");

@mixin keyboard-caret() {
  box-shadow: 0 0 3px 2px $variable-type-color-hover;
}

@import "../base";

._sage {
  dt {
    font-weight: normal;
    margin-top: 4px;
  }

  > dl {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 15px);
  }

  dl dl {
    margin-top: 4px;
    padding-left: 25px;
    border-left: none;
  }

  > dl > dt {
    background: $secondary-background;
  }

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

  ul {
    margin: 0;
    padding-left: 0;

    &:not(._sage-tabs) > li {
      border-left: 0;
    }

    &._sage-tabs {
      background: $secondary-background;
      border: $border;
      border-width: 0 1px 1px 1px;
      padding: 4px 0 0 12px;
      margin-left: -1px;
      margin-top: -1px;

      li,
      li + li {
        margin: 0 0 0 4px;
      }

      li {
        border-bottom-width: 0;
        height: $spacing * 6px + 1px;


        &:first-child {
          margin-left: 0;
        }

        &._sage-active-tab {
          border-top: $border;
          background: #fff;
          font-weight: bold;
          padding-top: 0;
          border-bottom: 1px solid #fff !important;
          margin-bottom: -1px;
        }

        &._sage-active-tab:hover {
          border-bottom: 1px solid #fff;
        }
      }
    }

    > li > pre {
      border: $border;
    }
  }

  dt:hover + dd > ul {
    border-color: $border-color-hover;
  }

  pre {
    background: #fff;
    margin-top: 4px;
    margin-left: 25px;
  }

  ._sage-popup-trigger:hover {
    color: $variable-type-color-hover;
  }

  ._sage-source ._sage-highlight {
    background: #cfc;
  }

  ._sage-source span {
    border-right: 3px inset #268bd2;
  }
}

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

._sage-report {
  td {
    background: #fff;

    > dl {
      padding: 0;
      margin: 0;

      > dt._sage-parent {
        margin: 0;
      }
    }
  }

  td:first-child,
  td,
  th {
    padding: 2px 4px;
  }

  td._sage-empty {
    background: $border-color !important;
  }

  dd, dt {
    background: #fff;
  }

  tr:hover > td {
    box-shadow: none;
    background: #cfc;
  }
}