.single-document-analyses {
  .single-document-analysis-card {
    /* Valid for badges */
    .document-valid-for {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;

      .valid-for-label {
        font-size: var(--font-size-xs);
        color: var(--color-text-quaternary);
      }

      .valid-for-badges {
        display: flex;
        gap: 8px;
      }

      .valid-for-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: var(--font-size-xs);
        font-weight: var(--weight-medium);

        &.active {
          background-color: var(--color-bg-primary);
          color: var(--color-text-primary);

          i {
            color: var(--color-fg-success-secondary);
          }
        }

        &.inactive {
          background-color: var(--color-bg-secondary);
          color: var(--color-text-quaternary);

          i {
            color: var(--color-text-quaternary);
          }
        }
      }
    }

    .mark-as-f2f-button {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      height: 22px;
      border: 1px solid var(--color-border-primary);
      border-radius: 16px;
      font-size: var(--font-size-xs);
      font-weight: var(--weight-medium);
      color: var(--color-text-secondary);
      background-color: var(--color-base-white);
      cursor: pointer;
      white-space: nowrap;

      &:hover {
        background-color: var(--color-bg-secondary);
        border-color: var(--color-border-secondary);
      }
    }

    /* button_to generates a form, need to prevent it from stretching */
    form:has(.mark-as-f2f-button) {
      display: inline-flex;
      align-self: center;
    }

    /* Primary F2F card highlight */
    &.primary-f2f {
      border: 1px solid var(--color-border-new);
      background: var(--color-bg-new);
    }
  }
}