.like_dislike {
  display: flex;
  justify-content: space-between;

  &.both-active {
    & .like,
    & .dislike {
      & a {
        &::after {
          background-color: #284FCC;
        }
      }

      .counter {
        display: none;
      }
    }
  }

  &:has(.active) {
    .like,
    .dislike {
      .label {
        display: none;
      }
    }
  }

  & .like,
  & .dislike {
    display: flex;
    align-items: center;
    flex-direction: column;

    & a {
      position: relative;

      &:after {
        content: '';
        display: block;
        width: 64px;
        height: 64px;
        background-color: rgba(0, 0, 0, 0.25);
        mask-size: 64px 64px;
        mask-position: center;
        mask-repeat: no-repeat;
      }
    }

    .label {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      color: #22327B;
      text-align: center;
      font-family: Poppins;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 30px;
    }

    span.counter {
      color: #22327B;
      text-align: center;
      font-family: Poppins;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 30px;
    }

    &.active {
      a {
        &:after {
          background-color: #284FCC;
        }
      }
    }
  }

  & .like {
    & a {
      &:after {
        mask-image: url(/sites/sorteostec/themes/tec_prepa/images/svg/thumbs_up.svg);
      }
    }
  }

  & .dislike {
    & a {
      &:after {
        mask-image: url(/sites/sorteostec/themes/tec_prepa/images/svg/thumbs_down.svg);
      }
    }
  }
}