// $author Ante Aljinovic https://github.com/aljinovic

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

$variable-type-color: #06f;
$variable-type-color-hover: #f00;

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

// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 150"><path d="M6 7h18l-9 15zm0 30h18l-9 15zm0 45h18l-9-15zm0 30h18l-9-15zm0 12l18 18m-18 0l18-18" fill="#555"/><path d="M6 126l18 18m-18 0l18-18" stroke-width="2" stroke="#555"/></svg>
$caret-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNTU1Ii8+PC9zdmc+");

@import "base";

.kint-rich {
  .kint-focused {
    box-shadow: 0 0 3px 2px $variable-type-color-hover;
  }

  dt {
    font-weight: normal;

    &.kint-parent {
      margin-top: 4px;
    }
  }

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

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

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

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

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

    &.kint-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;
        }

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

        &.kint-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;
  }

  .kint-source {
    margin-left: -1px;

    .kint-highlight {
      background: #cfc;
    }
  }

  .kint-parent.kint-show > .kint-search {
    border-bottom-width: 1px;
  }

  table {
    td {
      background: #fff;

      > dl {
        padding: 0;
        margin: 0;

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

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

    dd,
    dt {
      background: #fff;
    }

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