$main-background: #e0eaef;
$secondary-background: #c1d4df;

$text-color: #1d1e1e;
$variable-name-color: #1d1e1e;
$variable-type-color: #0092db;
$variable-type-color-hover: #5cb730;

$border-color: #b6cedb;
$border-color-hover: #0092db;

$caret-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8CAMAAACO5hB7AAAACVBMVEX///82b4tctzBls0NMAAAAQklEQVR42rWRIQ4AAAgCwf8/2qgER2BeuwJsgAqIzekMfMryPL9XQSkobE6vwKcsz/N7FfPvh09lnPf/b+7673+f0uHuAZ/EdkNQAAAAAElFTkSuQmCC");


@mixin keyboard-caret() {
  box-shadow: 0 0 3px 2px #5cb730;
}

@import "../base";

._sage {
  > dl > dt {
    background: linear-gradient(to bottom, #e3ecf0 0, #c0d4df 100%);
  }

  ul._sage-tabs {
    background: linear-gradient(to bottom, #9dbed0 0px, #b2ccda 100%);
  }

  & > dl:not(._sage-trace) > dd > ul._sage-tabs li {
    background: $main-background;

    &._sage-active-tab {
      background: $secondary-background;
    }
  }

  & > dl._sage-trace > dt {
    background: linear-gradient(to bottom, #c0d4df 0px, #e3ecf0 100%);
  }

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