.app-detailed-mode__content {
  display: table;
  height:  100%;
}

.app-detailed-mode__suggested, .app-detailed-mode__browse {
  position:       relative;
  display:        table-cell;
  padding:        0 8px;
  color:          #4b4f56;
  vertical-align: middle;
  white-space:    nowrap;
  font-weight:    bold;
  cursor:         pointer;
}

.app-detailed-mode__suggested.active, .app-detailed-mode__browse.active,
.app-detailed-mode__suggested:hover, .app-detailed-mode__browse:hover {
  color: #53aaca;
}

.app-detailed-mode__left-border {
  position:    absolute;
  left:        0;
  display:     inline-block;
  border-left: 1px solid #bdc7d8;
}

.app-detailed-mode__left-border:before {
  display: inline-block;
  content: '';
}

.app-detailed-mode__tick {
  position:      absolute;
  bottom:        0;
  left:          50%;
  z-index:       101;
  display:       none;
  margin-left:   -7px;
  width:         0;
  height:        0;
  border-right:  5px solid transparent;
  border-bottom: 5px solid #abbdd4;
  border-left:   5px solid transparent;
}

.app-detailed-mode__tick:after {
  position:      relative;
  top:           1px;
  left:          -5px;
  display:       block;
  width:         0;
  height:        0;
  border-right:  5px solid transparent;
  border-bottom: 5px solid white;
  border-left:   5px solid transparent;
  content:       '';
}

.app-detailed-mode__suggested_active .app-detailed-mode__tick, .detailed-mode__browse_active .app-detailed-mode__tick {
  display: inline-block;
}