.checkin-head-nav {
  margin-bottom: 15px;

  .checkin-date > a > svg {
    width: 15px;
  }
}

.checkin-days-nav {
  text-align: center;
  font-size: 1.2em;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  margin-top: 1em;
  border-radius: 5px;
  background: white;
  box-shadow: 0 4px 0 #E1D8C8;
  max-width: 500px;
  width: 95%;

  .ember-pick-a-date {
    display: none;
  }

  .yesterday, .tomorrow {
    flex: 1;
    font-size: 2em;
    position: relative;
    transition: all .25s;

    &:hover {
      transform: scale(1.4, 1);
      a { color: $primary; }
    }

    a {
      padding: 5px 20px;
      color: $primary;
    }
  }

  .yesterday {
    border-right: 1px solid $lightgrey;
  }

  .tomorrow {
    border-left: 1px solid $lightgrey;
  }

  .calendar-opener {
    display: flex;
    flex: 2;
    justify-content: center;
    align-items: center;

    svg {
      width: 15px;
      margin-top: -4px;
    }
  }

  &.big {
    font-size: larger;
  }

  .checkin-date {
    color: $primary;
    display: inline-block;
    padding: 20px 0 20px 0;
    cursor: pointer;
  }
}

@media (min-width: $tablet) {
  .checkin-days-nav {
    &:hover {
      .yesterday, .tomorrow {
        opacity: 1;
      }
    }
  }
}