@import "../../styles/variables";

.repo {
  padding-left: $defaultIndent;
  position: relative;
  width: 20%;
  box-sizing: border-box;
}

.name {
  color: #4078c0;
  font-size: 16px;
}

.desc {
  font-size: 14px;
  margin-bottom: 16px;
  margin-top: 8px;
  color: #767676;
  font-weight: 100;
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel {
  display: flex;
  flex-flow: row;
}

.property {
  color: #767676;
  font-weight: 100;
  margin-right: 50px;
}

.fa {
  margin-right: 5px;
}

.stars {
  @extend .property;
  flex: 1;
  text-align: right;
  margin-right: 0;
  .fa {
    margin-right: 0;
  }
}

.size {
  @extend .property;
}

.githubIcon {
  font-size: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
}
@media(max-width: $widthScreenDisplayLarge) {
  .repo {
    width: 25%;
  }
}
@media(max-width: $widthScreenDisplayDefault) {
  .repo {
    width: 33.33%;
  }
}
@media(max-width: $widthScreenLaptopSmall) {
  .repo {
    width: 50%;
  }
}
@media(max-width: $widthScreenTabletPortrait) {
  .repo {
    width: 100%;
  }
}