/*------------------------------------*\
  #TABLE OF CONTENTS
\*------------------------------------*/

$accordion-background-color: palette(gray, lightest);
$accordion-border-color: palette(gray, lighter);
$accordion-text-color: palette(black);
$accordion-active-inner-background-color: #464e68;
$accordion-active-inner-background-color-hover: #434b64;
$accordion-active-background-color: #344059;
$accordion-active-background-color-hover: #2f3a50;
$accordion-active-border-color: #5c6585;
$accordion-active-inner-text-color: #a1bed3;

.c-toc-list {
  padding: 0;
  margin: 0;
  counter-reset: section;                /* Creates a new instance of the section counter with each ol element */
  list-style-type: none;
  font-size: 14px;
}

/**
  * 1. Increments only this instance of the section counter
  * 2. Adds the value of all instances of the section counter separated
  *    by a ".".
  */
.c-toc-list__link:before {
  counter-increment: section; /* [1] */
  content: counters(section,".") " "; /* [2] */
}

.c-toc-list__link {
    display: inline-block;
    padding: 15px;
    width: 100%;
}

.c-toc-list {
  background-color: $accordion-background-color;
  .c-toc-list__link {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: $accordion-border-color;
  }
  a {
    color: $accordion-text-color;
  }
  :hover {
    background-color: #ececec;
  }
}

.c-toc-list .c-toc-list {
  background-color: $accordion-active-inner-background-color;
  .c-toc-list__link {
    border: 0;
  }
  a {
    color: $accordion-active-inner-text-color;
  }
}

.c-toc-list .c-toc-list .c-toc-list {
  padding-left: 15px;
}

.c-toc-list__active .c-toc-list {
  :hover {
    background-color: $accordion-active-inner-background-color-hover;
  }
}

.c-toc-list__active {
  background-color: $accordion-active-background-color;
  .c-toc-list__link {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid $accordion-active-border-color;
  }
  a {
    color: palette(white);
  }
  :hover {
    background-color: $accordion-active-background-color-hover;
  }
}