$spacing: 5;

// base 3
$main-background: #fdf6e3;

// base 2
$secondary-background: #eee8d5;

// base 00
$text-color: #657b83;

// base 01
$variable-name-color: #586e75;

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

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

// base 1
$border-color: #93a1a1;

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

// <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="#93a1a1" stroke="#93a1a1"><use xlink:href="#a"/><use xlink:href="#a" transform="rotate(90 -15 45)"/></g><g fill="#586e75" stroke="#586e75" transform="translate(0 30)"><use xlink:href="#a"/><use xlink:href="#a" transform="rotate(90 -15 45)"/></g><path d="M6 126l18 18m-18 0l18-18" stroke-width="2" stroke="#586e75"/></svg>
$caret-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzAgMTUwIj48ZGVmcz48cGF0aCBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNCAzYTI0IDMyIDAgMCAxIDAgMjQgNDAgMjAtMTAgMCAxIDIzLTEyQTQwIDIwIDEwIDAgMSA0IDN6IiBpZD0iYSIvPjwvZGVmcz48ZyBmaWxsPSIjOTNhMWExIiBzdHJva2U9IiM5M2ExYTEiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAtMTUgNDUpIi8+PC9nPjxnIGZpbGw9IiM1ODZlNzUiIHN0cm9rZT0iIzU4NmU3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzMCkiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAtMTUgNDUpIi8+PC9nPjxwYXRoIGQ9Ik02IDEyNmwxOCAxOG0tMTggMGwxOC0xOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM1ODZlNzUiLz48L3N2Zz4=");

@import "base";

.kint-rich {
  .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 $variable-type-color inset;
  }

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