@import "../../../assets/style/all";

:host {
  display: block;
}

.outer-wrapper {
  border-radius: 5px;
  background-color: mat-color($mat-grey, 400);

  &.con {
    background-color: rgba(198, 40, 40, 0.3);
  }

  &.pro {
    background-color: rgba(46, 125, 50, 0.3);
  }

}

.author-row {
  margin: 5px;
  padding: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  .name {
    font-weight: 500;
  }

  .date {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid mat-color($mat-grey, 800);
    font-weight: 200;
  }

  .avatar {
    height: 25px;
    width: 25px;
    border-radius: 50%;
  }
}

.text-box {
  padding: 10px 20px 20px 20px;
  border-radius: 5px;
}

.bottom-row {
  border-radius: 0 0 5px 5px;
  background-color: rgba(255, 255, 255, 0.5);
}

.vote-count {
  font-weight: 600;
}

.vote-tick {
  &.chosen {

    &.up {
    }

  }

  &.selected {
    font-weight: 600;
    color: mat-color($mat-deep-orange, 600);
  }

  &.rejected {
    opacity: 0.2;
  }

}

.vote-tick:hover ~ .vote-tick {
  opacity: 0.2;
}


md-icon, button[md-button]:not([disabled]) {
  &.red {
    color: mat-color($mat-red, 700);
  }
  &.green {
    color: mat-color($mat-green, 700);
  }
  &.yellow {
    color: mat-color($mat-yellow, 800);
  }
}