.side-nav {
  background: $mist;
  box-shadow: 3px 0px 6px rgba($coal, .3);
  width: 224px;

  a {
    text-decoration: none;
    display: block;
  }

  .side-nav-search {
    background: $tin;
    padding: 0px ($unit * 1);
    height: $unit * 6;
    border-bottom: 1px solid $fog;

    input {
      border: none;
      border-radius: 200px;
      width: 100%;
      box-sizing: border-box;
      height: 30px;
      padding: 0px $unit;
      margin: $unit 0px;
    }
  }

  .side-nav-primary {
    list-style-type: none;
    margin: 0px;
    padding: 0px;

    > li {
      margin: 0px;
      padding: 0px;
      border-bottom: 1px solid $fog;

      > a {
        line-height: ($unit * 6) - 1;
        padding: 0px ($unit * 2) 0px ($unit * 6);
        color: $metal;
        font-size: 14px;
        text-transform: uppercase;
        text-align: left;
        font-weight: 400;
        position: relative;

        &.is-selected {
          background: $fog;
          color: $regal;

          .side-nav-icon {
            color: $regal;
          }
        }
      }

      .side-nav-icon {
        position: absolute;
        top: 0px;
        left: 16px;
        z-index: $layer-1;
        font-size: 19px;
        color: $cloud;
        line-height: 47px;
      }
    }
  }
}