Like/Dislike base (CSS)

/* ESTRUCTURA */

.postlikes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  & .plike-data {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-direction:column;
    & p {
      margin:0;
      padding:0;
    }
  }
  & .plike-buttons {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    & button {
      display:flex;
      justify-content:center;
      align-items:center;
      gap:.5em;
      padding:1em;
      & span.rep-nb {
        margin:0;
        border:0;
        padding:0;
        &::before {
          content:'[';
        }
        &::after {
          content:']';
        }
      }
    }
  }
}



/* ESTILO */

.postlikes {
  background:var(--cuerpo);
  backdrop-filter:var(--ft-blur);
  padding:1rem;
  padding-left:1.5rem;
  & .plike-data {
    & p {
      font:var(--fs-mini) var(--f-mono);
      text-transform:uppercase;
      & a {
        color:var(--group);
      }
    }
  }
  & .plike-buttons {
    & button {
      border:var(--border1);
      background:var(--dbckg0);
      outline:0!important;
      box-shadow:unset;
      color:var(--subtitle);
      font:var(--fs-mini) var(--f-mono);
      text-transform:uppercase;
      & em {
        font-size:var(--fs-body);
        margin-right:.5em;
        color:var(--group-50);
      }
      &.fa_liked, &.fa_disliked, &:hover {
        background:Var(--dbckg2);
        & em {
          color:var(--group);
        }
      }
    }
  }
}