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

@use "kint";

.kint-rich {
  @include kint.rich();

  // TODO: Remove after mixed decls is released (https://sass-lang.com/documentation/breaking-changes/mixed-decls/)
  & {
    --main-background: #f8f8f8;
    --secondary-background: #f8f8f8;

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

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

    --alternative-background: #fff;
    --highlight-color: #cfc;

    --caret-image: url("data:image/svg+xml;utf8,<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='%23555'/><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23555'/></svg>");
  }

  .kint-focused {
    box-shadow: 0 0 3px 2px var(--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: var(--secondary-background);
  }

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

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

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

    &.kint-tabs {
      background: var(--secondary-background);
      border: var(--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: calc(var(--spacing) * 6 + 1px);

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

        &.kint-active-tab {
          border-top: var(--border);
          background: var(--alternative-background);
          font-weight: bold;
          padding-top: 0;
          border-bottom: 1px solid var(--alternative-background) !important;
          margin-bottom: -1px;
        }

        &.kint-active-tab:hover {
          border-bottom: 1px solid var(--alternative-background);
        }
      }
    }

    > li > pre {
      border: var(--border);
    }
  }

  dt:hover + dd > ul {
    border-color: var(--border-color-hover);
  }

  pre {
    background: var(--alternative-background);
    margin-top: 4px;
    margin-left: 25px;
  }

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

    .kint-highlight {
      background: var(--highlight-color);
    }
  }

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

  table {
    td {
      background: var(--alternative-background);

      > dl {
        padding: 0;
        margin: 0;

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

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

    dd,
    dt {
      background: var(--alternative-background);
    }

    tr:hover > td {
      box-shadow: none;
      background: var(--highlight-color);
    }
  }
}