.comments {
  .comment {
    display: flex;
    padding-bottom: 1em;
    margin-top: 1em;
    border-bottom: var(--line-width) solid var(--accent);

    .avatar-container {
      flex-shrink: 0;
      width: 75px;
      height: 75px;
      margin-right: 1em;
      outline: 1px var(--gray-2) solid;
      background-color: rgb(230, 230, 230);

      svg {
        padding-top: 10%;
        width: 90%;
        height: 90%;
        color: rgb(250, 250, 250);
      }

    }

    .body {
      .username {
        font-weight: 500;
      }
    }

    .acciones {
      display: flex;
      flex-direction: row;

      &>*{
        margin-right: 1em;
      }

      .opinions {
        display: flex;
        flex-direction: row;

        button {
          border: none;
          background-color: transparent;
          cursor: pointer;

          span > *{
            display: inline;
          }

          &:hover, &.selected {
            color: var(--accent);
          }

        }
      }

      .stars {
        display: flex;
        justify-content: flex-start;

        .star {
          margin: inherit;
          width: 1.5em;
          height: 1.5em;
          cursor: auto;
        }

        .star.selected {
          color: var(--accent);
        }
      }
    }
  }
}