#mainContainer {
  
  > div {

    nav {
      transition: all 0.5s;

      > sib-router {
        background-color: $color-222-52-90;
        color: $color-purple-dark;
        flex: 0 0 auto;
        font-weight: 600;

        > ul {  
          cursor: pointer;
          list-style: none;
          margin: 0;
          padding-left: 0;

          li {
            align-items: center;
            border-bottom: 1px solid $color-lavender-gray;
            display: flex;
            margin: 0;
            padding: 2.55rem 2.55rem;
            position: relative;
            width: 12em;

            &::before {
              float: left;
              font-size: 4rem;
              margin-left: 0;
              margin-right: 2.55rem;
            }
          }

          > li {
            @include icon('arrow-right-circle');
          }
          
          > sib-route {
            
            &[active] {
              background-color: $color-purple-dark;
              color: $color-mustard;
              display: inline-block;
            }

            &[name^='circle'],
            &[name^='project'] {
              
              > li::before {
                font-size: 4rem;
              }
            }
            
            &[name$='chat'] > li {
              @include ci('chat');
            }
            
            &[name$='create'] > li {
              @include ci('offer');
            }
            
            &[name$='edit'] > li {
              @include ci('list');
            }
            
            &[name$='profile'] > li {
              @include ci('information');
            }          
          }
        }
      }
      
      &.offsite-is-closed {
        transform: translate(15.5rem);
        
        & .jsOffsiteToggle::before {
          transform: rotate(180deg);
        }

        & ~ #views-container {
          margin-left: -15.5rem;
          transform: translate(15.5rem);
        }
      }
    }
  }
}