.bottom-nav {
  background-color: white;
  bottom: 0;
  display: flex;
  height: $bottom-nav-height;
  left: 0;
  position: fixed;
  width: 100%;

  -webkit-box-shadow: 0px 0px .5rem 0px $shadow;
     -moz-box-shadow: 0px 0px .5rem 0px $shadow;
          box-shadow: 0px 0px .5rem 0px $shadow;

  @include media ($medium-screen) {
    display: none;
  }

  .bottom-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: $bottom-nav-height;
    justify-content: center;
    text-align: center;

    label {
      color: $inactive-link;
      font-size: .8rem;
      line-height: .8rem;
      margin: .25rem 0 0 0;
      letter-spacing: .5px;
    }

    .icon {
      height: 1.25rem;
    }

    &.active {
      label {
        color: $primary;
      }

      .icon * {
        fill: $primary;
      }
    }
  }
}