.btn-reponse{
  font-weight: 600;
  cursor: pointer;
  .icon{
    width: 13px;
    height: 13px;
    color: #6f75bc;
    img,
    svg{
      width: 100%;
      height: 100%;
      vertical-align: baseline;
      object-fit: contain;
    }
  }
}

.count-like,
.count-comment{
  font-size: .625rem;
  font-weight: 600;
  color: var(--#{$variable-prefix}light-text-color);
  .circle-wrap{
    width: 13px;
    height: 13px;
    padding: 2px;
    background-color: #62ceb5;
    svg{
      color: #fff;
    }
  }
}

.community-wrapper{
  .nav.nav-pills{
    padding: 1rem .875rem;
  }
  .community-navbar{
    @media (max-width: 769px) {
      width: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        display: none;
      }
    }
    .nav.nav-pills{
      padding: 1rem .875rem;
      @media (max-width: 769px) {
        flex-wrap: nowrap;
        width: max-content;
        padding-bottom: .5rem;
        overflow: auto;
      }
    }
  }

  .tab-content{
    max-height: calc(100vh - 280px);
    overflow: auto;
    background-color: var(--#{$variable-prefix}accordion-bg-color);
    &::-webkit-scrollbar {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      display: none;
    }
    .post-img-wrapper{
      height: 170px;
      overflow: hidden;
      border-radius: 6px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .tabs-community.card-body{
    .tab-content{
      &::-webkit-scrollbar {
        display: inherit;
      }
      &::-webkit-scrollbar-thumb {
        display: inherit;
      }
    }
  }
}

.inputbtngroup-wrapper{
  background-color: var(--#{$variable-prefix}background-white);
}


@media (max-width: 769px) {
  .tabs-community{
    .form-floating > .form-control{
      padding-left: 0;
      padding-right: 0;
    }
    .field-buttonset-wrapper{
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      .btn-group{
        position: static;
        display: flex;
        label{
          width: 50%;
        }
      }
    }
  }
}