$watchbarHue = $uiHue; // or 0 (red) looks ok too;
$sectionMarginTop = 2rem;
$buttonColor = hsl(0, 0%, 57%);
$titleColor = hsl(0, 0%, 64%);  // brighter = more noticeable
$currentItemBgColor =  hsl($watchbarHue, 70%, 32%);
$fontSize = 14px;
$highlightPaddingLeft = 6px;


// Left align the icon with other topic titles.
.esWB_T_Title .icon-menu::before
  margin-left: 0;
  margin-right: 5px;

#esWatchbarColumn
  background: hsl(0, 0%, 13%);

.esWB
  height: 100%;
  padding: 10px 17px 10px 4px;
  overflow-y: auto;

  .esWB_T_Link
    display: inline-block;
    width: 100%; // or nothing happens when clicks right part of hover-highlighted <li>
    padding: 3px 0 1px $highlightPaddingLeft;

  h3,
  .esWB_T_None,
  .esWB_T_Title
    color: $buttonColor;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    display: inline-block;
    font-size: $fontSize;

  .esWB_T_None
    color: hsl(0, 0%, 43%);

  h3
    color: $titleColor;
    text-transform: uppercase;
    font-size: 1.4rem;
    margin: $sectionMarginTop 0 0.2rem $highlightPaddingLeft;
    cursor: default;
    word-spacing: 1px;

.DW .esWB_LI
    line-height: normal;
    font-size: $fontSize; // otherwise line-height: normal can vary, on pages with custom html
    list-style: none;
    margin: 0 0 2px;
    cursor: pointer;
    &.esWB_T-None
      cursor: default;
    &:not(.esWB_T-None):not(.esWB_T-Current):hover
      background: hsl($watchbarHue, 70%, 23%);
      .esWB_T_Title
        color: hsl(0, 0%, 85%);
    &.esWB_T-Current:hover
      .esWB_T_B
        color: white;
        background: $currentItemBgColor; // or a .btn-default:hover style makes it almost white
    &.esWB_T-Current
      background: $currentItemBgColor;
      .esWB_T_Link
        width: calc(100% - 31px); // so the settings button won't float-drop [4WKE2R]
      .esWB_T_Title
        color: white;

    &.esWB_T-Unread
      .esWB_T_Title
        color: hsl(0, 0%, 87%);
        font-weight: bold;
        text-shadow: 0.7px 0 0 hsl(0, 0%, 87%);
        letter-spacing: 0.4px;

.esWB_CloseB
  float: right;
  position: relative;
  top: -5px;
  right: -14px;
  color: $buttonColor;
  border-radius: 0;
  padding: 4px 13px 2px 10px;

// Break out CSS for the (+) [JKWUD0]
.esWB_T_B,
.esWB_CreateB
  position: relative;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 17px;
  font-weight: bold;
  line-height: 0;
  background: none;
  color: $buttonColor;

.esWB_CreateB
  float: right;
  padding: 0;
  margin-top: $sectionMarginTop;
  top: -1px;
  border: 1px solid $buttonColor;

.esWB_CloseB,
.esWB_CreateB
  &:hover
    background: hsl($watchbarHue, 85%, 22%);
    color: hsl(0, 0%, 80%);

.esWB_CreateB
  &:hover
    box-shadow: 0 0 0 8px hsl(207, 85%, 22%);

.DW .esWB_T-Home
  margin: 5px 0 0;
  width: calc(100% - 45px);
  font-weight: bold;

.esWB_T_B
  float: right;  // [4WKE2R]
  display: inline-block;
  padding: 6px 3px 4px;
  border: none;
  height: auto;
  color: hsl(0, 0%, 83%);
  width: auto;
  left: 6px;
  border-radius: 0;
  background: $currentItemBgColor;

.esWB_T_D
  left: 42px !important;
  min-width: 213px; // looks nice

// REFACTOR break out CSS for this (+)  [JKWUD0]
.s_WB_AddSubComB_Plus
  padding: 7px 0 0 2px;
  margin: 0 5px 0 1px;
  top: -3px;
  border: 1px solid #919191;
  position: relative;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 17px;
  font-weight: bold;
  line-height: 0;
  background: none;
  color: #919191;
  display: inline-block;

.s_WB_AddSubComB_Title
  font-style: italic;
