.assessment-surveys {
  .survey-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .filter-item {
      padding: 7px 15px;
      font-size: 14px;
      border-radius: 50px;
      font-weight: var(--weight-medium);
      background-color: var(--color-bg-quaternary);
      border: solid 1px var(--color-border-secondary);

      &.active,
      &:hover {
        background-color: var(--color-bg-brand-secondary);
        border: solid 1px var(--color-bg-brand-solid);
        color: var(--color-bg-brand-solid);
      }
    }
  }
}

.survey-section-item {
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-direction: column;
  gap: 6px;
  height: auto !important;
  min-height: 44px;

  .assessment-section-stats-title {
    margin-right: 0;
    overflow: hidden;

    @media(min-width: 1024px) {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow-wrap: break-word;
    }

    @media(max-width: 1023px) {
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.assessment-section-completion-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;

  .assessment-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;

    .assessment-section-completion-percentage {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
    }
  }

  .assessment-section-confidence-progress {
    display: flex;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--color-bg-quaternary);

    .segment {
      height: 100%;
    }

    .segment.low {
      background-color: var(--color-fg-error-primary);
    }

    .segment.medium {
      background-color: var(--color-fg-note-secondary);
    }

    .segment.high {
      background-color: var(--color-fg-success-primary);
    }
  }
}