.credentialList {
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.credentialList__item {
  background:#fff;
}
.credentialList__item:nth-child(even) {
  background:none;
}

.credentialList__item + .credentialList__item {
  border-top:1px solid lighten(#ccd4e0, 10%);
}

.credentialList__link {
  padding:15px;
  display:flex;
  &:hover {
    background:#f2f5f8 !important;
  }
}

.credentialList__properties {
  flex: 1 1 auto;
  min-width:1px;
}

.credentialList__name {
  font-size:16px;
  font-weight:600;
  margin-bottom:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
  .label {
    vertical-align:2px;
    margin-left:4px;
  }
}

.credentialList__key {
  font-size:12px;
  font-family:'Droid Sans Mono', fixed;
  color:#999;
}

.credentialList__type {
  margin-right:10px;
  width:40px;
}

.credentialList__usedAt {
  flex: 0 1 auto;
  max-width:150px;
  text-align:right;
  margin-left:25px;
  font-size:12px;
  line-height:1.4;
  color:#999;
}

.credentialList__usedAt--active {
  color:$green;
  .credentialList__usedAtTitle {
    background-color:$green;
  }

}

.credentialList__usedAt--quiet {
  color:#bac647;
  .credentialList__usedAtTitle {
    background-color:#bac647;
  }

}

.credentialList__usedAt--dormant {
  color:#c7ad46;
  .credentialList__usedAtTitle {
    background-color:#c7ad46;
  }

}

.credentialList__usedAt--inactive {
  color:#d05026;
  .credentialList__usedAtTitle {
    background-color:#d05026;
  }
}

.credentialList__usedAtTitle {
  margin-bottom:3px;
  background-color:#999;
  color:#fff;
  display:inline-block;
  padding:1px 4px;
  font-size:10px;
  border-radius:3px;
}
