@use "kint";

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

  // TODO: Remove after mixed decls is released (https://sass-lang.com/documentation/breaking-changes/mixed-decls/)
  & {
    --spacing: 5px;

    // base 03
    --main-background: #002b36;

    // base 02
    --secondary-background: #073642;

    --backdrop-color: var(--secondary-background);

    // base 0
    --text-color: #839496;

    // base 1
    --variable-name-color: #93a1a1;

    // blue
    --variable-type-color: #268bd2;

    // cyan
    --variable-type-color-hover: #2aa198;

    // base 01
    --border-color: #586e75;

    // blue
    --border-color-hover: #268bd2;

    --caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30 150'><defs><path stroke-linejoin='round' d='M4 3a24 32 0 0 1 0 24 40 20-10 0 1 23-12A40 20 10 0 1 4 3z' id='a'/></defs><g fill='%2393a1a1' stroke='%2393a1a1'><use xlink:href='%23a'/><use xlink:href='%23a' transform='rotate(90 -15 45)'/></g><g fill='%23586e75' stroke='%23586e75' transform='translate(0 30)'><use xlink:href='%23a'/><use xlink:href='%23a' transform='rotate(90 -15 45)'/></g><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23586e75'/></svg>");
  }

  .kint-focused {
    // green
    box-shadow: 0 0 3px 2px #859900 inset;
    border-radius: 7px;
  }

  > dl > dt,
  ul.kint-tabs {
    box-shadow: 4px 0 2px -3px var(--variable-type-color) inset;
  }

  ul.kint-tabs li.kint-active-tab {
    padding-top: 7px;
    height: 34px;
  }

  footer li {
    color: #ddd;
  }
}