.checkin-navigation {
  left: 0;
  width: 100%;
  bottom: $bottom-nav-height;
  height: $bottom-nav-height * .8;
  display: flex;
  position: fixed;
  overflow-y: auto;
  background-color: white;

  -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) {
    bottom: 0;
  }

  a {
    color: $inactive-link;
    display: flex;
    padding: 0 .5em;
    flex-grow: 1;
    align-items: center;
    white-space: nowrap;
    justify-content: center;

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