.comment-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 45px;


  .comment-header {
    display: flex;
    align-items: center;
    gap: 10px;

    h3 {
      font-size: 22px;
      font-weight: 600;
    }

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #D9D9D9;
      border-radius: 100px;
      height: 26px;
      width: 26px;

      p {
        font-size: 16px;
        font-family: 'Poppins';
        color: #000;
        font-weight: 600;
      }
    }
  }

  .comment-input {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #000;
    border-radius: 8px;
    padding: 20px;

    .comment-profile {
      display: flex;
      align-items: center;
      gap: 8px;

      p {
        font-size: 20px;
        font-weight: 600;
        color: #000;
      }

      img {
        border-radius: 100px;
        width: 40px;
        height: 40px;
        object-fit: cover;
      }
    }

    .comment-input-area {
      background-color: transparent;
      outline: none;
      border: none;
      padding: 0;
      font-family: 'Figtree';
      color: #000;
      font-size: 14px;
      font-weight: 500;
    }

    hr {
      opacity: 0.1;
    }

    .comment-send-btn {
      display: flex;
      justify-content: flex-end;

      button {
        border-radius: 8px;
        font-family: 'Poppins';
        font-size: 16px;
        font-weight: 600;
        color: white;

        background-color: #000;
        padding: 8px 20px;
      }
    }
  }

  .comment-list {
    display: flex;
    flex-direction: column;

    .comment-item {
      display: flex;
      flex-direction: column;
      padding: 20px 0px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      gap: 15px;

      .comment-profile {
        display: flex;
        justify-content: space-between;

        .comment-identity {
          display: flex;
          align-items: center;
          gap: 8px;

          p {
            font-size: 20px;
            font-weight: 600;
            color: #000;
          }

          img {
            width: 40px;
            height: 40px;
            border-radius: 100px;
            object-fit: cover;
          }

        }

        .relative {
          position: relative;

          .dropdown-toggle {
            filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(94%) contrast(80%);
            background-color: transparent;
            border: none;
            
            &:hover {
              filter: brightness(0) saturate(100%) invert(0%) sepia(95%) saturate(20%) hue-rotate(39deg) brightness(93%) contrast(107%);
            }
          }

          .dropdown-report {
            position: absolute;
            box-shadow: 0px 0px 2px black;
            color: black;
            border-radius: 8px;
            padding: 5px 10px;
            left: -275%;
            z-index: 100;

            &:hover {
              color: red !important;
            }

            p {
              display: flex;
              width: max-content;
              padding: 0px !important;
              cursor: pointer;
              font-size: 13px;
            }
          }
        }

        .option-icon {
          width: 30px;
          height: 30px;
          cursor: pointer;
          filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(94%) contrast(80%);

          &:hover {
            filter: brightness(.) saturate(100%) invert(73%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(94%) contrast(80%);
          }
        }

      }

      .comment-time-duration {
        color: rgba(0, 0, 0, 0.4);
        font-weight: 500;
      }

      .comment-content {
        justify-content: space-between;

        .comment-action {
          img {
            width: 30px;
            height: 30px;
            filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(94%) contrast(80%);
            cursor: pointer;

            &:hover {
              filter: brightness(.5) invert(60%);
            }
          }

          .alr-liked.liked {
            filter: brightness(0) saturate(100%) invert(25%) sepia(46%) saturate(4931%) hue-rotate(345deg) brightness(85%) contrast(105%);
          }


          p {
            font-family: 'Figtree';
          }
        }
      }

    }
  }

  p {
    font-size: 14px;
    font-family: 'Poppins';
  }

  .comment-load-btn {
    background-color: #D9D9D9;
    outline: none;
    border: none;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0;
    text-align: center;
    border-radius: 8px;
    font-family: 'Poppins';

  }

  button {
    cursor: pointer;

    &:hover {
      filter: brightness(0.8);
    }
  }

  .hidden {
    display: none !important;
  }
}