.legal-side-navigation {
  @include container;
  display: block;
  margin: 0 gutter() 2rem gutter();

  font-family: $heading-font-family;

  &.affix {
    position: inherit;
  }

  @include breakpoint($break-tablet) {
    position: absolute;
    @include span(8 of 32);
    max-width: 320px;

    &.affix-top {
      padding-top: 3rem;
      position: absolute;
    }

    &.affix {
      top: 3rem;
      position: fixed;
    }
  }

  @include breakpoint($max-width) {
    padding-left: 0;
    margin-left: 0;
  }

  .item {
    padding: .2rem .6rem;
    margin-top: $base-line-height / 2;

    &:hover {
      font-weight: 700;
    }
  }

  .item.active {
    background: $light-blue;
    font-weight: 700;
    border-radius: 4px 0 0 4px;
  }

  .arrow-box {
    position: relative;
    background: $light-blue;
  }

  .arrow-box:after, .arrow-box:before {
    left: 100%;
    top: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  .arrow-box:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: $light-blue;
    border-width: 17px;
    margin-top: -7px;
  }
  
  .arrow-box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: transparent;
    border-width: 20px;
    margin-top: -30px;
  }
}
