lila/ui/learn/css/_side-map.scss

.learn__side-map {
  user-select: none;
  .back,
  .categ > h2 {
    display: block;
    font-size: 1.3em;
    height: 50px;
    line-height: 50px;
    text-indent: 15px;
    cursor: pointer;
    opacity: 0.81;
  }
  .back {
    display: flex;
    color: $c-font;
  }
  .back img {
    width: 50px;
    height: 50px;
    opacity: 0.9;
    margin-right: 10px;
    padding: 10px;
    background: rgba(120, 120, 120, 1);
    display: block;
  }
  .back:hover {
    background: rgba(120, 120, 120, 0.2);
  }
  .categ > h2 {
    border-top: $border;
  }
  .categ > h2:hover {
    background: fade-out($c-primary, .8);
  }
  .categ.active {
    border: $border;
    border-width: 0 1px;
  }
  .categ.active:last-child {
    border-bottom-width: 1px;
  }
  .categ.active > h2 {
    cursor: default;
    background: $c-primary;
    color: $c-primary-over;
  }
  .categ:not(.active) .categ_stages {
    display: none;
  }
  .stage {
    @extend %roboto, %flex-center;
    @include transition();
    font-size: 1.1em;
    opacity: .9;
    color: $c-font;

    img,
    i {
      width: 50px;
      height: 50px;
      opacity: 0.9;
      margin-right: 10px;
      padding: 10px;
    }
    i::before {
      font-size: 30px;
    }
    &.active {
      background: fade-out($c-primary, .8);
    }
    &.active img {
      background: $c-primary;
    }
    &.done:hover {
      background: fade-out($c-good, .8);
    }
    &.done img {
      background: $c-good;
    }
    &.future:hover {
      background: fade-out($c-primary, .8);
    }
    &.future img {
      opacity: 0.7;
      background: $c-primary;
    }
    &:hover {
      filter: brightness(0.9);
      color: $c-font-clearer;
    }
  }
}