.feedbackModerationContainer {
  .badges {
    @extend
      .d-flex,
      .flex-row,
      .flex-wrap;

    row-gap: 8px;
  }

  .changeFeedbackModerationSettingsLink {
    @extend
      .align-self-auto,
      .mt-2;
  }

  .filterModerationFeedbackNav {
    @extend
      .nav,
      .nav-pills,
      .align-self-center,
      .px-2,
      .py-1,
      .mt-4;

    background-color: var(--astuto-grey-light);
    border-radius: 0.5rem;

    .nav-item {
      cursor: pointer;
    }

    .nav-link {
      @extend
        .px-3,
        .py-1;

      color: var(--astuto-black);

      &.active {
        color: var(--astuto-black);
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .emptyList {
    @extend .mt-4, .mb-2;

    text-align: center;
  }

  .feedbackModerationList {
    .feedbackListItem {
      @extend
        .d-flex,
        .flex-row,
        .justify-content-between,
        .my-4,
        .mx-2,
        .p-2;

      .feedbackListItemIconAndContent {
        @extend .d-flex;

        .feedbackListItemIcon {
          @extend .align-self-center;
        }
        
        .feedbackListItemContent {
          @extend .ml-4;
  
          .feedbackListItemTitle {
            @extend
              .font-weight-bold,
              .mb-1;

            &:hover {
              cursor: pointer;
              text-decoration: underline;
            }
          }

          .feedbackListItemDescription {
            color: var(--astuto-grey);
          }
        }
      }

      .feedbackListItemActions {
        @extend
          .d-flex;
      }
    }
  }
}