@use '../../../assets/styles/fonts';
.ff-donut-chart-section {
  display: flex;
  align-items: center;
  padding: 8px;
}

.ff-donut-chart-svg-container {
  display: flex;
  svg {
    text:nth-of-type(1) {
      @extend .fontSm;
      font-weight: 600;
    }
    text:nth-of-type(2) {
      @extend .fontXL;
      font-weight: 600;
    }
    text:nth-of-type(3) {
      @extend .font-size-8;
      font-weight: 500;
    }
  }
}
.ff-status-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ff-status-item {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  opacity: 1;
  @extend .fontSm;
  &.ff-highlighted {
    opacity: 1;
  }

  &.ff-fade {
    opacity: 10%;
  }

  .ff-status-text {
    font-weight: 500;
    color: var(--status-skipped-text-color);
  }
  .ff-status-details-script-count {
    display: flex;
    gap: 4px;
    font-weight: 600;
  }
  .ff-status-details-script-percentage {
    font-weight: 400;
    color: var(--brand2-color);
  }
}

.ff-status-label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ff-status-details {
  display: flex;
  gap: 4px;
}

.ff-status-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  opacity: 80%;
}