Takumon/mean-blog

.toc {
  position: -webkit-sticky; /* Safari */
  position: sticky;

  top: 24px;
  padding-left: 4px;
  padding-bottom: 42px;
  color: #767575;
  font-size: 13px;
  font-weight: bold;
  overflow-y: scroll;
  max-height: 80vh;

  &__inner {
    overflow-y: visible;
    border-left: 4px solid #A9A9A9;
    padding: 4px 4px 0 4px;
  }

  &__title {
    padding: 4px;
    font-weight: 100;
    display: block;
    text-decoration: none;
    color: inherit;

    &:hover {
      color: #383838;
      background: #E8E8E8;
    }

    &:after {
      content: "";
      display: block;
      height: 1px;
      width: 60%;
      margin: 7px 0 4px 0;
      background: #dbdbdb;
      clear: both;
    }

  }

  &__head {
    position: relative;
    margin-left: -8px;

    &__link {
      padding: 2px 4px;
      cursor: pointer;
      width: 100%;
      word-wrap: break-word;
      box-sizing: border-box;
      display: block;
      text-decoration: none;
      color: inherit;

      &:hover {
        color: #383838;
        background: #E8E8E8;

        &:before {
          content: "";
          left: 0;
          top: 0;
          bottom: 0;
          background: #383838;
          position: absolute;
          width: 4px;
        }
      }

      &.active {
        color: #ec407a;
        background: #FFEFF3;

        &:before {
          content: "";
          left: 0;
          top: 0;
          bottom: 0;
          background: #ec407a;
          position: absolute;
          width: 4px;
        }
      }

      &:focus {
        outline: 0;
      }
    }
  }
}